javascript - 使用 javascript 将 Id 动态分配给 DOM 元素

Question

我只是有一个关于如何为 HTML 元素即时生成 id 的快速问题。到目前为止，我已经尝试了一些东西，我从一个“for”循环开始，我已经知道我必须为多少个元素生成 Id，在这种情况下，我有一个“ul”和 6 个“li”。我的“for”循环如下:

var items = $("ul li").length;
for(var i = 0; i <= items; i++){
    $("ul li").attr("id", "number" + i);
}

“number”将是与“i”连接的新 ID，因此我为每个“li”获得不同的 ID。您可能会说，这行不通，因为我最终为每个“li”得到了相同的 Id:

在这种情况下，我得到 <li id="number6">... </li>对于“ul”中的所有“li”元素。我用 jQuery 尝试了一个“while”循环和“.each()”，但我得到了完全相同的结果。

如有任何帮助，我们将不胜感激。

Answer 1

使用 .each() 可以更轻松地做到这一点(在里面使用 this，而不是选择器!)，像这样:

$("ul li").each(function(i) {
  $(this).attr("id", "number" + i);
});

.each() 中的函数获取索引和元素作为参数，因此您可以像当前一样使用 i 分配从 0 开始的 ID。

或者，您也可以将类似的函数传递给 .attr() ，像这样:

$("ul li").attr('id', function(i) {
  return "number" + i;
});