只有$。每一次執行似乎被執行

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中已經存在的元素只是移動該元素，它不創建新的元素。

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 2

您只處理一個element而不是使用元素字符串表示法。

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

}); 

Answer 3

您必須首先克隆元素，否則它會在DOM中移動。

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