JQuery nth-child не работает должным образом

Question

Я использую селектор JQuery nth-child, чтобы изменять поля на каждом третьем div с классом photo_post_thumbnail, но он меняет его каждый второй div?

Может кто-нибудь определить, что я делаю неправильно?

Сайт

http://www.clients.eirestudio.net/hatstand/wordpress/photos/

HTML-разметка

<div class="postbox photo_post_thumbnail">
      blah blah
</div>

<div class="postbox photo_post_thumbnail">
      blah blah
</div>

<div class="postbox photo_post_thumbnail">
      blah blah
</div>

JQueryКод

$('.photo_post_thumbnail:nth-child(3n)').css('margin-right', '0px');

Answer 1

Это происходит потому, что перед этими div у вас есть <h1>, что делает этот div четвертым дочерним элементом, а не третьим:)

Селектор nth-child поначалу немного сбивает с толку, потому что это nth-child родительского элемента , а не только nth-child , соответствующего этому селектору родительского элемента, селектор не имеет позиции для этого селектора.

Чтобы получитьделай что хочешь, делай 3n+1 вот так:

$('.photo_post_thumbnail:nth-child(3n+1)').css('margin-right', '0px');

Answer 2

Альтернативное решение:

   $('.photo_post_thumbnail').each(function(i) {
      i=(i+1);
      if(i%3==0){
     $(this).css("margin-right","0px"));
    }
   });