如何使用jQuery生成动态ID？

Question

我想将渐进式 id 添加到无序 HTML 列表中的一系列元素。我使用 jQuery.each()方法来获取每个<li>List 并<span>在每个<li>. 然后我添加了带有 each() 索引的 ID 属性作为数字。

$('#menu li ul li').each(function(i, e){
    $(this).append('<span class="arr"></span>');
    $(".arr").attr("id", "id_" + i);
});

Fiddle Demo

但我得到id_3了所有元素。为什么？我做错了什么？

谢谢你的帮助！

Answer 1

这是因为您将其应用于.arr全局，因此每次都将其覆盖。
您需要更具体地添加它，通过.arr在您当前的li.

将您的代码更改为：

$('#menu li ul li').each(function(i, e){
    $(this).append('<span class="arr"></span>');
    $(this).find(".arr").attr("id", "id_" + i);
});

Answer 2

正如已经指出的，$(".arr")目标是类的每个元素arr，因此在第四次迭代中，您将所有此类元素更新为 id id_3。

$(".arr", this)您可以使用或来限制选择$(this).find(".arr")，但只需扭转附加会更容易：

$('#menu li ul li').each(function(i, e){
    $('<span class="arr"></span>')
        .attr("id", "id_" + i)
        .appendTo(this);
});

也就是说，先创建元素，设置其 id，然后使用.appendTo()代替.append()。

或者，您可以在创建 Span 时.attr()将所需的属性直接传递给函数，$()而不是调用：

$('#menu li ul li').each(function(i, e){
    $('<span></span>', {
        "class": "arr",
        "id": "id_" + i
    }).appendTo(this);
});