Найдите 5-й элемент с указанным классом в списке и добавьте еще один класс в jQuery

Я хотел бы addClass "green" до 5 li.hr в каждом контейнере ul на моем сайте.

$("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.

Ответ 1

Вы можете сделать это в чистом 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;
}

Предостережение: Селектор ~ не поддерживается IE6. Хорошо работает на все остальное.

Ответ 2

Несмотря на популярный консенсус, вы не можете использовать :nth-child здесь, потому что он подсчитывает всех детей, независимо от того, соответствуют ли они предыдущему селектору. Только после того, как он захватывает n-й элемент, он сравнивает его с селектором, чтобы определить, совпадает ли он. Итак: ul li.hr:nth-child(5) на самом деле обрабатывается как ul li:nth-child(5).hr. Это может показаться странным, но оно строго соответствует спецификации CSS (см. Описание jQuery).

К счастью, 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>

Ответ 3

Вы можете использовать nth-child jQuery.

$("ul li.hr:nth-child(5)").addClass("green");

Ответ 4

$('ul').find('li.hr:nth-child(5)').each(function() {
   $(this).addClass("green");
});

Ссылка: : селектор nth-child

CSS3 предлагает аналогичный селектор, читайте http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

будет выглядеть как

li.hr:nth-child(5) {
   background-color: green;
}

Ответ 5

li.hr:nth-child(5) найдет .hr, который также является пятым дочерним элементом в <ul>. Если я правильно понимаю, вы ищете 5 ^th.hr. Попробуйте:

$('ul').find('li.hr:eq(4)').addClass('green');

Это не один селектор, но он должен работать на вас. Для каждого <ul> он находит все элементы .hr и выбирает пятый.

Рабочий пример: http://jsfiddle.net/Xv6gX/

Ответ 6

var lis = $('ul li.hr');
if(lis.length >= 4) { 
    $(lis[4]).addClass('green'); 
}

Должен сделать трюк. Я тестировал его в Firebug.

Селектор nth-child не работает так, как вы ожидали, поскольку он не учитывает селектор классов.

Ответ 7

Вам нужен nth-child:

$("ul li.hr:nth-child(5)").addClass('green');

Ответ 8

Вы можете сделать это таким образом.

if($("ul li.hr")[4]){
    $($("ul li.hr")[4]).addClass("green");
}