1 
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){ // ... });

私はまだ、そのオプションセットのループ内の順番に固有のすべての新しい変数を再宣言する必要があるという問題に遭遇します。

関数に新しいオプションセットを追加するたびに同じコードを常に繰り返さないように、これを要約する方法を誰かが理解するのを手伝ってくれますか?

編集: $('div.corresponding') 要素はそれぞれ完全に異なるため、カウンターでインクリメントすることはできません。(例: $('div.foo') または $('div.foo ul.bar')

4

2 に答える 2

2

たとえば、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');
于 2012-11-07T03:07:58.697 に答える
0

ラッパーのループと、各ラッパーのオプションのループを実行し、対応する 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);
        });
    });
}
于 2012-11-07T03:13:01.723 に答える