Найдите 5-й элемент с указанным классом в списке и добавьте другой класс в jQuery. - PullRequest
Новая
       40

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

16 голосов
/ 13 июля 2010

Я бы хотел * от 1001 * до 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>

Мне нужен пятый li.hr.

Ответы [ 8 ]

16 голосов
/ 26 июля 2010

Несмотря на общепринятый консенсус, вы не можете использовать :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>
15 голосов
/ 13 июля 2010

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

$("ul li.hr:nth-child(5)").addClass("green");
7 голосов
/ 27 июля 2010

Вы можете сделать это на чистом 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.Отлично работает на всем остальном.

5 голосов
/ 13 июля 2010 
$('ul').find('li.hr:nth-child(5)').each(function() {
   $(this).addClass("green");
});

Ссылка: : селектор n-го ребенка

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

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

li.hr:nth-child(5) {
   background-color: green;
}
3 голосов
/ 25 июля 2010

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

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

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

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

1 голос
/ 25 июля 2010 
var lis = $('ul li.hr');
if(lis.length >= 4) { 
    $(lis[4]).addClass('green'); 
}

Должен сделать свое дело. Я проверил это в Firebug.

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

0 голосов
/ 13 июля 2010

Вы можете сделать это так. 

if($("ul li.hr")[4]){
    $($("ul li.hr")[4]).addClass("green");
}
0 голосов
/ 13 июля 2010

Вам нужно nth-child там: 

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