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

你必须首先克隆元素，否则它会在DOM周围移动。

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

Answer 3

您只处理一个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 );
  });

});

只有$ .each的最后一次执行似乎正在执行

3 个答案: