使用jQuery计算动态添加元素的数量。

Question

参照附上的截图，具有id属性为'item'的div元素是通过以下jQuery代码添加的：

$("#items").prepend(template);

其中template是每个带有id属性为'item'的div元素的HTML内容。如果我尝试获取$('#item').length来计算这些div元素的数量，但它总是返回1，有人知道这是为什么吗？怎样才能得到正确的项目数量？

var num = $('#item').length;
alert(num);

由于无法查看提供的截图，根据描述的情况，问题在于HTML文档中id应当是唯一的。当你多次使用同一个id（如'id=item'）来预置新的div元素时，虽然内容会被添加到'#items'元素之前，但浏览器只会识别第一个具有该id的元素。因此，无论你添加了多少个这样的div，$('#item').length始终只返回1，因为它找到的是第一个匹配id='item'的元素。

要正确地获取通过上述方式动态添加的所有div元素的数量，你应该确保每次添加时给新div一个唯一的id或者不使用id属性，而是改用class等其他属性进行标识。例如，可以使用类名"class='item'"并用如下代码获取数量：

var num = $('.item').length;
alert(num);

这样就能得到所有类名为'item'的div元素的正确数量了。

Bob · Answer

使用 class 属性代替 id 属性，因为在页面中 id 属性应当是唯一的。以下是一个示例：

当文档加载完毕后，点击“添加项”按钮时，会从模板创建一个新的项，并将其添加到带有 items 类的元素开头。同时，它还会计算并显示当前页面上拥有 item 类的元素的数量。

$(document).ready(function() {
  // 使用了ID选择器 '#addItem'
  $("#addItem").click(function() {
    // 定义一个用于添加的新元素的HTML模板字符串
    var template = '项目';
    // 将新元素插入到所有 class="items" 的 div 元素内部的开头
    $("#items").prepend(template);
    // 计算并获取页面上所有 class="item" 的元素数量
    var num = $(".item").length; // 注意这里是计算类的数量
    // 弹出警告框显示当前项的数量
    alert(num);
  });
});

HTML部分：

Pascal MARTIN · Answer

您正在向具有 id="items" 的元素追加一个新元素，其 id="item"，因此实际上您需要的是 #items 内部子元素的数量，可以这样获取：

$("#items").children().length;

不过正如 @mandy8055 指出的那样，在示例代码中，您创建了多个具有重复 id="#item" 的项，这是不推荐的。为解决这个问题，应使用类（class）而非 ID，如下所示：

$(".item").length;

hugeannex · Answer

Can only have one ID！