如何使用jQuery生成动态ID？

Question

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

$('#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_3 id。

您可以使用$(".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()。

或者在调用.attr()时，您可以在创建范围时直接将所需属性传递给$() function：

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

Answer 3

您在分配属性时定位了一个类。您创建的每个元素都使用相同的类创建，因此所有项目都分配了相同的属性。此代码将新创建的元素保存到名为elem的变量中，然后设置新创建的元素的属性ID。

var elem = $(this).append('<span class="arr"></span>');
elem.attr("id", "id_" + i);

Answer 4

您需要确定$(".arr").attr("id", "id_" + i);选择器的范围。它目前每次都会提取所有<span>个标签。我猜这时你总共有4个，这就是为什么他们都被设置为＆＃34; id_3＆＃34;。

在$（this）中添加到您的选择器。

  

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

修改小提琴：http://jsfiddle.net/NZgyD/2/

Answer 5

你可以这样做

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

Answer 6

因为$(".arr")是多个项目的选择器