[英]jquery: Change attribute value for all <li> List elements
I have a simple structure like: 我有一个简单的结构,如:
HTML HTML
<ul id="costsDropdown">
<li data-position="bla bla"></li>
</ul>
and I want to change each "data-position" attribute of my list Elements. 我想更改列表元素的每个“数据位置”属性。
My first Jquery Shot was this here: 我的第一个Jquery Shot是这里的:
$("#costsDropdown ul").each(function() {
$("li").attr("data-position", "TEST-VALUE123");
});
but it doesnt work, I think my selector are wrong... 但它不起作用,我认为我的选择器是错误的......
could anyone give me a hint please? 有人可以给我一个提示吗?
Thanks for any help! 谢谢你的帮助!
Greetz 格尔茨
Your selectors are a bit off 你的选择器有点偏
$("#costsDropdown ul").each
That is trying to select the child ul
of the container #costsDropdown
(which is the ID of the ul
) - what you want is: 那就是试图选择容器
#costsDropdown
的子ul
(这是ul
的ID) - 你想要的是:
$("#costsDropdown li").each(function() {
$(this).attr("data-position", "TEST-VALUE123");
});
ID's are unique - no need to double up the selector with an ID and the type of element it is. ID是唯一的 - 不需要使用ID 和元素类型将选择器加倍。
Note that I used $(this)
, not $("li")
, inside the each
callback. 请注意,我在
each
回调中使用$(this)
,而不是$("li")
。 $("li")
selects all li
elements, anywhere on the page; $("li")
选择页面上任何位置的所有 li
元素; we just want a jQuery wrapper for the one specific one we're handling inside the each
. 我们只想要一个jQuery包装器,用于我们在
each
处理的特定一个。
In fact, the each
is completely unnecessary because of the set-based nature of jQuery; 事实上,由于jQuery的基于集合的特性,
each
都是完全没有必要的; if you use the .attr
setter, it sets the attribute on all elements in the set: 如果使用
.attr
setter,它会在集合中的所有元素上设置属性:
$("#costsDropdown li").attr("data-position", "TEST-VALUE123");
That will set the value on all of the li
elements inside #costsDropdown
. 这将设置
#costsDropdown
所有 li
元素的值。
If you need to set separate individual values on the individual li
elements, you still don't need each
(though it's fine if you want to use it); 如果你需要在各个
li
元素上设置单独的单独值,你仍然不需要each
(如果你想使用它就没关系); you can use the version of attr
that accepts a callback that it uses to find out what value to set: 您可以使用接受回调的
attr
版本来查找要设置的值:
$("#costsDropdown li").attr("data-position", function(index) {
return "Test value " + index;
});
That will set "Test value 0"
on the first li
, "Test value 1"
on the second, etc. And like the each
example above, if you need to, you can use this
within the callback to refer to the li
for that call (possibly using $(this)
to wrap it if you need a jQuery wrapper). 这将在第一个
li
上设置"Test value 0"
,在第二个上设置"Test value 0"
"Test value 1"
等。并且像上面的each
例子一样,如果需要,你可以在回调中使用this
来引用li
调用(如果你需要一个jQuery包装器,可能使用$(this)
来包装它)。
$("#costsDropdown ul")
matches no elements, it has to be $("#costsDropdown")
( #costsDropdown
is the ul
). $("#costsDropdown ul")
匹配任何元素,它必须是$("#costsDropdown")
( $("#costsDropdown")
#costsDropdown
是 ul
)。
And even that is unnecessary. 即使这是不必要的。 Go
走
$("li[data-position]").attr("data-position", "TEST-VALUE123");
instead. 代替。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.