jquery：更改所有<li>列表元素

Question

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

HTML

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

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

我的第一个 Jquery 镜头就在这里：

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

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

是的，有人可以给我一个暗示吗？

感谢您的帮助！

格尔茨

Answer 1

您的选择器有点偏离

$("#costsDropdown ul").each

这是尝试选择容器ul的子#costsDropdown（这是ul的ID） - 您想要的是：

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

ID是唯一的 - 无需使用ID 和元素类型将选择器加倍。

请注意，我在$(this)回调中使用了$("li")，而不是each。 $("li")在页面的任意位置选择所有 li元素;我们只想要一个jQuery包装器，用于我们在each内处理的特定包装器。

事实上，由于jQuery的基于集合的特性，each完全没有必要;如果您使用.attr setter，它会在集合中的所有元素上设置属性：

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

这将设置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（如果需要jQuery包装，可能使用$(this)来包装它。）

Answer 2

@Transactional不匹配任何元素，必须为$("#costsDropdown ul")（$("#costsDropdown") #costsDropdown）。

即使这是不必要的。去

ul

代替。