Return to Answer

//extract reusable code
function operateOptions(el,correspondsTo){
 var self = $(el),
 input = self.find('input'),
 id = input.attr('id'),
 value = input.val(),
 title = self.find('.title').text(),
 source = self.find('img').attr('src'),
 listItem = $('<li/>', {
 'value': value,
 'id': id
 }),
 imageElement = $('<img/>', {
 'src': source,
 'title': title
 });
 $(correspondsTo).append(listItem);
 listItem.append(imageElement);
}
function redundantSee(list) {

 //loop through each
 $.each(list, function(optionSet, correspondsTo) {

 //operate on each
 $(optionSet).find('.options').each(function(i,el) {
 //i'd avoid using "this". 
 //instead, .each() provides the element as the second argument
 operateOptions(el,correspondsTo);
 });
 });
}
//use the function on the following selectors and it's corresponding selectors
redundantSee([
 '.wrapper:eq(0)': 'div.corresponding1', '.wrapper:eq(1)': 'div.corresponding2'
]);​

//extract reusable code
function operateOptions(el,correspondsTo){
 var self = $(el),
 input = self.find('input'),
 id = input.attr('id'),
 value = input.val(),
 title = self.find('.title').text(),
 source = self.find('img').attr('src'),
 listItem = $('<li/>', {
 'value': value,
 'id': id
 }),
 imageElement = $('<img/>', {
 'src': source,
 'title': title
 });
 //chain methods
 listItem.append(imageElement).appendTo(correspondsTo);
}
//create function that accepts multiple options
function redundantSee(list) {
 //loop through each option
 $.each(list, function(optionSet, correspondsTo) {
 //operate on each option in the optionSet
 $(optionSet).find('.options').each(function(i,el) {
 //send over the option element and it's corresponding selector
 operateOptions(el, correspondsTo);
 });
 });
}
redundantSee({'.wrapper:eq(0)': 'div.corresponding1', '.wrapper:eq(1)': 'div.corresponding2'});​

Here's a pretty-printed, cleaned version:

function operateOptions(el, correspondsTo) {
 var self = $(el),
  input = self.find('input'), id = input.attr('id'),
  value = input.val(),
 title = self.find('.title').text(),
 source = self.find('img').attr('src'),
 listItem = $('<li/>', {
 'value': value,
 'id': id
 }),
 imageElement = $('<img/>', {
 'src': source,
 'title': title
 });
 listItem.append(imageElement).appendTo(correspondsTo);
}
function redundantSee(list) {
  $.each(list, function (optionSet, correspondsTo) {
  $(optionSet).find('.options').each(function (i, el) {
 operateOptions(el, correspondsTo);
 });
 });
}
redundantSee({'.wrapper:eq(0)': 'div.corresponding1', '.wrapper:eq(1)': 'div.corresponding2'});​

function redundantSee(list) {
 
 //loop through each
 $.each(list, function(optionSet,correspondsTo){

 //operate on each
 $(optionSet).find('.options').each(function(i,el) {
 
  //i'd avoid using "this". 
 //instead, .each() provides the element as the second argument
 var self = $(el),
 input = self.find('input'),
 id = input.attr('id'),
 value = input.val(),
 title = self.find('.title').text(),
 source = self.find('img').attr('src'),
 listItem = $('<li/>', {
 'value': value,
 'id': id
 }),
 imageElement = $('<img/>', {
 'src': source,
 'title': title
 });

 $(correspondsTo).append(listItem);
 listItem.append(imageElement);
 });
 });
}
//use the function on the following selectors and it's corresponding selectors
redundantSee([
 '.wrapper:eq(0)': 'div.corresponding1',
 '.wrapper:eq(1)': 'div.corresponding2'
]);​

//extract reusable code
function operateOptions(el,correspondsTo){
 var self = $(el),
 input = self.find('input'),
 id = input.attr('id'),
 value = input.val(),
 title = self.find('.title').text(),
 source = self.find('img').attr('src'),
 listItem = $('<li/>', {
 'value': value,
  'id': id
 }),
 imageElement = $('<img/>', {
 'src': source,
 'title': title
 });
 $(correspondsTo).append(listItem);
 listItem.append(imageElement);
}
function redundantSee(list) {
 //loop through each
 $.each(list, function(optionSet, correspondsTo) {
 //operate on each
 $(optionSet).find('.options').each(function(i,el) {

 //i'd avoid using "this". 
 //instead, .each() provides the element as the second argument
 operateOptions(el,correspondsTo);
 });
 });
}
//use the function on the following selectors and it's corresponding selectors
redundantSee([
 '.wrapper:eq(0)': 'div.corresponding1',
 '.wrapper:eq(1)': 'div.corresponding2'
]);​