如何更改所有列表项的属性值？

我有一个简单的结构，例如：

HTML

<ul id="costsDropdown">
    <li data-position="bla bla"></li>
</ul>

我想更改列表元素的每个“数据位置”属性。

我的第一次Jquery镜头是在这里：

$("#costsDropdown ul").each(function() {
    $("li").attr("data-position", "TEST-VALUE123");
});

但它不起作用，我认为我的选择器是错误的......

有人可以给我提示吗？

谢谢你的帮助！

Greetz

你的选择器有点偏离

$("#costsDropdown ul").each

那是试图选择孩子ul容器的#costsDropdown（这是ul) - 你想要的是：

$("#costsDropdown li").each(function() {
    $(this).attr("data-position", "TEST-VALUE123");
});

ID 是唯一的 - 无需将选择器与 ID 重复使用and它的元素类型。

请注意，我使用了$(this), not $("li")， 在 - 的里面each打回来。$("li")选择all li元素，页面上的任何位置；我们只需要一个 jQuery 包装器来处理我们正在处理的一个特定的each.

事实上，each由于 jQuery 基于集合的性质，这是完全没有必要的；如果你使用.attrsetter，它设置集合中所有元素的属性：

$("#costsDropdown li").attr("data-position", "TEST-VALUE123");

这会将值设置为all of the li里面的元素#costsDropdown.

如果您需要对个体设置单独的个体值li元素，你仍然不需要each（尽管如果你想使用它也没关系）；你可以使用以下版本attr它接受一个回调，用于找出要设置的值：

$("#costsDropdown li").attr("data-position", function(index) {
    return "Test value " + index;
});

这将设置"Test value 0"在第一个li, "Test value 1"在第二个，等等。就像each上面的例子，如果你需要的话，你可以使用this在回调中引用li对于该调用（可能使用$(this)如果您需要 jQuery 包装器，则包装它）。