Find the 5th element with a specified class in a list and add another class in jQuery_问答_开发者

Find the 5th element with a specified class in a list and add another class in jQuery

开发者 https://www.devze.com 2023-01-07 14:41 出处：网络

I\'d like to addClass \"green\" to the 5th li.hr in every ul containers in my site. $(\"ul li.hr\").each(function() {

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 5^th .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");
}

Find the 5th element with a specified class in a list and add another class in jQuery

精彩评论

关注公众号

热门标签

图文推荐

Find the 5th element with a specified class in a list and add another class in jQuery

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：