Как выбрать каждый n-й из определенного дочернего элемента в jQuery? - PullRequest
Новая
       34

Как выбрать каждый n-й из определенного дочернего элемента в jQuery?

3 голосов
/ 15 февраля 2011

У меня есть эта разметка: 

<div id="container">

  <h1>Heading</h1>

  <p>Some text</p>

  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <!-- ... same thing on down the page ... -->
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>

</div>

Я бы хотел добавить класс к каждому четвертому div. Вот jQuery, который я ожидал, будет работать: 

$('div.foo:nth-child(4n)').addClass('bar');

Но это приводит к: 

<div id="container">

  <h1>Heading</h1>

  <p>Some text</p>

  <div class="foo">Some stuff</div>
  <div class="foo bar">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo bar">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo bar">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo bar">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>
  <div class="foo">Some stuff</div>

</div> <!-- #container -->

Итак, очевидно, что все дочерние элементы подсчитываются, и только соответствующий элемент добавляет класс. Я мог бы просто принять во внимание эти два других элемента и использовать :nth-child(4n+2), но я не всегда могу рассчитывать на то, что перед моими div s стоят ровно два элемента.

Есть ли n-дочерний подобный селектор (или метод), который будет учитывать только указанный элемент при подсчете?

Ответы [ 4 ]

12 голосов
/ 15 февраля 2011

Вы можете использовать функцию фильтра для получения каждого 4-го элемента следующим образом: 

$('div.foo').filter(function(index){
 return (index%4 == 3);
}).addClass('bar');

Рабочий пример @:

http://jsfiddle.net/wCxSv/

1 голос
/ 28 июля 2013

В jQuery 1.9+ :nth-of-type будет работать здесь.

$ ( 'div.foo:nth-of-type(4n)').addClass('bar');

Ссылка: Хорошее описание: nth-of-type против: nth-child

0 голосов
/ 15 февраля 2011

http://api.jquery.com/filter/#using-filter-function Отличный учебник.Об использовании фильтра.

Основная идея состоит в том, чтобы использовать оператор модуля (%) в сочетании с каждым или фильтром для итерации по элементам и применять действия только тогда, когда модуль не возвращает остатка (то есть индекситерация - это кратное число, которое вы хотите.) Это обычная практика во многих контекстах.Вы также можете сделать что-то подобное с каждой функцией. 

$('div.foo').each(function(index) {
  if((index+1)%4 == 0){
    $(this).addClass('bar');
 });
0 голосов
/ 15 февраля 2011

Вы всегда можете сделать это сами: 

$('div.foo').each( function(i) {
  if( i % 4 != 3 )
    return
  $(this).addClass('bar')
})
...