JQuery nth-child不能正常工作 [英] JQuery nth-child not working properly

问题描述

我使用JQuery的nth-child选择器来改变每个第三个div上的边距，类型为photo_post_thumbnail，但它每隔两个div改变它。

I am using JQuery's nth-child selector to alter the margin on every 3rd div with a class of photo_post_thumbnail, but it alters it every 2nd 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');

推荐答案

c>< h1> 在这些div之前，使该div是第四个孩子不是第三个：）

It's doing this because you have a <h1> before those divs, making that div the 4th child not the third :)

nth-child 选择器有点混乱，因为它是父的 nth-child nth-child 与父选择器匹配，选择器不支持此选择器的位置。

The nth-child selector is a bit confusing at first because it's the nth-child of the parent, not just the nth-child matching that selector of the parent, the selector has no bearing the position for this selector.

要获得所需的div，请按如下所示执行 3n + 1 ：

To get the div you want, do 3n+1 like this:

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

这篇关于JQuery nth-child不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！