Question

function redundantSee() {

  var optionSet1 = $('.wrapper:eq(0)'),
      optionSet2 = $('.wrapper:eq(1)');

  optionSet1.find('.options').each(function(){
      var self = $(this),
          input = self.find('input'),
          title = self.find('.title').text(),
          value = input.val(),
          source = self.find('img').attr('src'),
          id = input.attr('id'),
          listItem = $('<li/>', {'value': value, 'id': id }),
          imageElement = $('<img/>', {'src': source, 'title': title});

      $('div.corresponding1').append(nameListItem);
      listItem.append(imageElement);
  });

  optionSet2.find('.options').each(function(){
      var self = $(this),
          input = self.find('input'),
          title = self.find('.title').text(),
          value = input.val(),
          source = self.find('img').attr('src'),
          id = input.attr('id'),
          listItem = $('<li/>', {'value': value, 'id': id }),
          imageElement = $('<img/>', {'src': source, 'title': title});

      $('div.corresponding2').append(listItem);
      listItem.append(imageElement);
  });
}

I’ve simplified this for posting, since there are going to be more than 4 options sets for this function to cycle through.

I’m having a problem figuring out how to turn all of the repetitive code into something much more manageable.

But since each option set has it’s own each loop, the $(this) variable (and all corresponding variables) are specific to the loop that is run on the (‘.options’) element.

If I do one each loop and use a counter, like this:

$('wrapper').each(function(i){ // ... });

I still run into the problem of needing to redeclare all my new variables specific to that optionSet’s turn in the loop.

Can someone help me figure out how I can condense this so that I’m not constantly repeating the same code every time I add a new option set to the function?

Edit: The $(‘div.corresponding’) elements are completely different for each one, so they can’t be incremented with a counter. (ex. One might be $(‘div.foo’) or $(‘div.foo ul.bar’)

Answer 1

You could extend jQuery for example so its more reusable:

// extend jquery
(function($){

    $.fn.redundantSee = function (subSelector) {

        return this.find('.options').each(function () {
            var self = $(this),
            input = self.find('input'),
            title = self.find('.title').text(),
            value = input.val(),
            source = self.find('img').attr('src'),
            id = input.attr('id'),
            listItem = $('<li/>', { 'value': value, 'id': id }),
            imageElement = $('<img/>', { 'src': source, 'title': title });

            $(subSelector).append(listItem);
            listItem.append(imageElement);
        });

    };

}(jQuery));

// and use it like this
$('.wrapper:eq(0)').redundantSee('div.corresponding1');
$('.wrapper:eq(1)').redundantSee('div.corresponding2');