JQuery nth-child 无法正常工作答案

【问题标题】：JQuery nth-child not working properlyJQuery nth-child 无法正常工作
【发布时间】：2011-02-11 13:09:57
【问题描述】：

我正在使用 JQuery 的 nth-child 选择器使用 photo_post_thumbnail 类更改每个 3rd div 的边距，但它会每隔 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');

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

这样做是因为您在这些 div 之前有一个 <h1>，使该 div 成为第四个孩子而不是第三个 :)

nth-child 选择器起初有点令人困惑，因为它是父级的nth-child ，而不仅仅是匹配父级的选择器的nth-child , 选择器与该选择器的位置无关。

要获得你想要的 div，请像这样 3n+1：

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

【讨论】：

是的，完全同意：D +1
我很困惑（看了他的页面后），这不应该是该类标签中的第 n 个实例吗？为什么兄弟 h1 很重要？他应该改用 :eq(n) 吗？
我想我需要研究第 n 个孩子的东西 :) （呃，父母的第 n 个孩子，而不是所选元素的第 n 个实例 :) 我应该先阅读更多内容 :)
@Mark - 这是我提到的令人困惑的部分:) n 不关心类选择器，:nth-child 它是 own 选择器，就像 @ 987654329@ 或:not() 等...所以它与class="photo_post_thumbnail" 和 :nth-child(3n+1) 的事实相匹配，n 不关心作为不同选择器的类。在您的 div 是第三个孩子之前并且有那个类，所以它匹配。你想要的是匹配那个类和每个第三个孩子 + 1 个 <h1> 的偏移量，这更有意义吗？

【解决方案2】：

替代解决方案：

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

【讨论】：

我认为你的意思是 $('.photo_post_thumbnail').each(function(i) { 在这里，$.each() 期望一个集合作为第一个参数:)
太好了 - 谢谢。我仍然对上面的 (3n+1) 解决方案有疑问，但您的解决方案立即运行良好。