gpt4 book ai didi

jquery - 在列表中查找具有指定类的第 5 个元素并在 jQuery 中添加另一个类

转载 作者:技术小花猫 更新时间:2023-10-29 12:12:50 25 4
gpt4 key购买 nike

我想将 addClass "green" 添加到我站点中每个 ul 容器中的第 5 个 li.hr

$("ul li.hr").each(function() {
if ($(this).length = 5) {
$(this).addClass("green");
}
});

PS:如果仅使用 CSS 可行,请告诉我如何实现。

请注意 ul 具有混合元素,例如:

<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">foo</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>

我需要第 5 个 li.hr

最佳答案

尽管有普遍的共识,但您不能在此处使用 :nth-child,因为它计算所有 个 child ,无论它们是否匹配前面的选择器。只有在 它获取第 n 个元素后,它才会将它与选择器进行比较以确定它是否匹配。因此:ul li.hr:nth-child(5) 实际上被视为 ul li:nth-child(5).hr。这听起来可能很奇怪,但它严格符合 CSS 规范(请参阅 jQuery description)。

幸运的是,jQuery 提供了很棒的 :eq() 伪类,它允许您通过从零开始的索引进行过滤,并且尊重前面的选择器...

$("ul > li.hr:eq(4)").addClass("green");

我什至对它进行了测试以确保它有效...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.green { color:green; font-weight:bold; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul > li.hr:eq(4)").addClass("green");
});
</script>
</head>
<body>
<ul>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">foo</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">foo</li>
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
<li class="a">foo</li>
<li class="b">foo</li>
<li class="hr">bar</li> <!-- 5th -->
<li class="c">foo</li>
<li class="a">foo</li>
<li class="hr">foo</li>
</ul>
</body>
</html>

关于jquery - 在列表中查找具有指定类的第 5 个元素并在 jQuery 中添加另一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3235900/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com