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个选项集循环。

我在弄清楚如何将所有重复代码转换为更易于管理的问题时遇到了问题。

但由于每个选项集都有自己的每个循环，因此$（this）变量（以及所有相应的变量）特定于在（'.options'）元素上运行的循环。

如果我为每个循环做一个并使用计数器，就像这样：

$('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);
        });
    });
}

有人可以帮助我干掉这些jQuery每个循环吗？

2 个答案: