jquery - $.each の最後の実行のみが実行されているようです

Question

コードは次のとおりです。

// Each ul that holds the collection of our entities
var lists = ['ul.emails', 'ul.phoneNumbers'];

// Setup the "add" link
var $addLink = $('<a href="#" class="margin-left btn btn-mini add"><i class="icon-plus"></i>label</a>');
var $newLinkLi = $('<li></li>').append($addLink);

$(document).ready(function() {

  // Add link to each list
  $.each(lists, function(index, list) { 
    $(list).append($newLinkLi);
  });

});

しかし、最後のものだけulがリンクを取得します。しかし、私がそうするなら

  $.each(lists, function(index, list) { 
    $(list).append('test');
  });

できます。何を与える？何かが参照渡しされていますか?

Answer 1

最初に要素を複製する必要があります。そうしないと、代わりに DOM 内で移動されます。

$(list).append($newLinkLi.clone());

Answer 2

DOM に既に存在する要素を追加すると、その要素が移動するだけで、新しい要素は作成されません。

var lists   = ['ul.emails', 'ul.phoneNumbers'],
    addLink = '<a href="#" class="margin-left btn btn-mini add"><i class="icon-plus"></i>label</a>';

$(document).ready(function() {
    $.each(lists, function(index, list) { 
        var $newLinkLi = $('<li />').append(addLink);
        $(list).append($newLinkLi);
    });
});

Answer 3

element要素文字列表現を使用する代わりに、1 つだけを処理しています。

// Each ul that holds the collection of our entities
var lists = ['ul.emails', 'ul.phoneNumbers'];

// Setup the "add" link
var $addLink = '<li><a href="#" class="margin-left btn btn-mini add"><i class="icon-plus"></i>label</a></li>';


$(document).ready(function() {

  // Add link to each list
  $.each(lists, function(index, list) { 
    $(list).append($addLink );
  });

});