有人可以幫我幹這些jQuery每個循環？

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); 
    }); 
} 

我已經簡化了這個帖子，因爲將要超過4個選項，通過設置此功能循環。

我在搞清楚如何把所有重複代碼的到的東西更易於管理的問題。

但由於每個選項組都有它自己的每個循環中，$（本）變量（以及所有相應的變量）是特定於在（」可供選項）元素上運行的循環。

如果我做一個每個迴路，並使用一個計數器，像這樣：

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

我仍然會碰到需要重新聲明特定於optionSet輪到迴路中的所有我的新變量的問題。

有人可以幫我找出我如何可以凝聚這讓我不經常我每次添加設置功能的新選項時重複相同的代碼？

編輯：$（「div.corresponding」）元件是用於每一個完全不同的，所以它們不能用計數器遞增。 （例如一個可能是$（ 'div.foo'）或$（ 'div.foo ul.bar'）

Answer 1

例如，您可以延長jQuery的所以它的可重用性。

// 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'); 

Answer 2

我會做包裝一個循環，並在每個包裝 選擇一個循環，並我會用一個增量變量對應的DIV。

function redundantSee() { 
    var i = 0; 
    $('.wrapper').each(function(){ 
     i++; 
     $(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}); 

      $('div.corresponding' + i).append(nameListItem); 
      listItem.append(imageElement); 
     }); 
    }); 
}