Find the 5th element with a specified class in a list and add another class in jQuery
I'd like to addClass "green" to the 5th li.hr in every ul containers in my site.
$("ul li.hr").each(function() {
if ($(this).length = 5) {
$(this).addClass("green");
}
});
PS: if it开发者_运维技巧s possible with CSS only, tell me how please.
Note that the ul has mixed elements, like:
<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>
I need the 5th li.hr.
Despite the popular consensus, you can't use :nth-child here because it counts all children, regardless of whether or not they match the preceding selector. Only after it grabs the nth element does it compare it to the selector to determine whether it matches. So this: ul li.hr:nth-child(5) actually gets treated as ul li:nth-child(5).hr. This might sound weird, but it strictly conforms to the CSS specification (see the jQuery description).
Luckily, jQuery provides the wonderful :eq() pseudo-class which allows you to filter by a zero-based index, and respects the preceding selector...
$("ul > li.hr:eq(4)").addClass("green");
I even tested this out to make sure it works...
<!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>
You can use nth-child of jquery.
$("ul li.hr:nth-child(5)").addClass("green");
You can do this in pure CSS:
/* set rule: select every li.hr element after the 4th */
ul > li.hr ~ li.hr ~ li.hr ~ li.hr ~ li.hr {
color: green;
}
/* unset rule: select every li.hr element after the 5th */
ul > li.hr ~ li.hr ~ li.hr ~ li.hr ~ li.hr ~ li.hr {
/* reverse the rules set in the previous block here */
color: black;
}
Caveat: The ~ selector is not supported by IE6. Works fine on everything else.
$('ul').find('li.hr:nth-child(5)').each(function() {
$(this).addClass("green");
});
Reference: :nth-child selector
CSS3 offers a similar selector, have a read http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
would look like
li.hr:nth-child(5) {
background-color: green;
}
li.hr:nth-child(5) will find an .hr that is also the fifth child in its <ul>. If I understand correctly, you're looking for the 5th .hr. Try:
$('ul').find('li.hr:eq(4)').addClass('green');
This isn't a single selector, but should work for your. For every <ul> it finds all .hr elements, and picks the fifth one.
Working example: http://jsfiddle.net/Xv6gX/
var lis = $('ul li.hr');
if(lis.length >= 4) {
$(lis[4]).addClass('green');
}
Should do the trick. I've tested it in Firebug.
the :nth-child selector doesn't work as you'd expect it, since it doesn't take into account the class selector.
You need the nth-child there:
$("ul li.hr:nth-child(5)").addClass('green');
You can do it this way.
if($("ul li.hr")[4]){
$($("ul li.hr")[4]).addClass("green");
}
加载中,请稍侯......
精彩评论