【问题标题】: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 之前有一个 &lt;h1&gt;,使该 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 个 &lt;h1&gt; 的偏移量,这更有意义吗?
    【解决方案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) 解决方案有疑问,但您的解决方案立即运行良好。
    猜你喜欢
    • 1970-01-01
    • 2014-11-12
    • 2019-08-13
    • 2012-06-11
    • 2013-07-19
    • 1970-01-01
    • 2019-01-12
    • 2021-12-14
    • 2014-07-08
    相关资源
    最近更新 更多