jQuery :nth-child() 选择器答案

【问题标题】：jQuery :nth-child() selectorjQuery :nth-child() 选择器
【发布时间】：2010-01-08 10:26:55
【问题描述】：

您好，请查看下面的 HTML。我正在尝试使用jQuery来获取DIV上的每个第三个实例，其中class="box"包含在DIV中，class="entry"没有右手边距：

我的 HTML 代码：

<div class="entry">

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box -->

    <div class="box">
        SOME HTML....
    </div><!-- end .box I Want to remove right hand margin on this div -->

    </div>
    <!--end entry-->

我对 jQuery 的尝试：

   <script>
        $(document).ready(function(){
            $("div.entry:nth-child(3)").css("margin", "0px");
        });
   </script>

我无法正常工作，有人可以帮忙吗？提前致谢！

感谢所有帮助提供的解决方案确实是正确的。我正在编写一个提供的模板，发现 JQuery 已设置为在兼容模式下运行，因此 $ 是问题所在。

【问题讨论】：

我也遇到了同样的问题。我创建了一个容器 div，在这种情况下为“.entry”，并使用了工作得很好的选择器 'div.entry>div.box:nth-child(3)'。感谢您的帮助

标签： jquery jquery-selectors

【解决方案1】：

来自文档（我的重点）

匹配所有元素是其父元素的第n个子元素或者是父元素的偶数或奇数子元素。

您当前正在选择父级，而您应该选择子级：

$("div.entry > div:nth-child(3)").css("margin", "0px");

【讨论】：

感谢您的帮助，非常感谢，但没有奏效。

【解决方案2】：

nth-child 似乎也被非 0 索引。如果您习惯使用 0 索引，请记住这一点。

【讨论】：

这真的很有用...thnx！

【解决方案3】：

您的:nth-child 选择器没有引用n，您需要在选择器中引用内部div。

试试：

$(document).ready(function(){
  $("div.entry div:nth-child(3n)").css("margin", "0px");
});

【讨论】：

抱歉 - 刚刚发现您的选择器也错了。您仍然需要3n 而不仅仅是3，但您还需要在nth-child 内容之前放置`div`。我已经对此进行了测试，并且可以正常工作。
我仍然无法使用您提供的解决方案来完成这项工作。我将 div.entry 嵌套在其他几个 div 中，这可能是原因吗？我是否必须引用整个路径，即“div1 > div2 > div.entry div:nthchild(3n)”？
它是否嵌套在其他 div 中应该没有区别，您当然不必引用整个路径。还有其他什么干扰那些最里面的div吗？条目中是否还有其他您不想受到影响的 div？也许你想要$("div.entry div.box:nth-child(3n)").css("margin", "0px");
FWIW，我已经使用嵌套在 other 中的 entry div 测试了我的解决方案，它工作正常。
@Dominic：再次感谢您的帮助。我刚刚尝试运行这个简单的行 $("div.entry").addClass("test");那是行不通的，我一定有一些冲突，但我不知道是什么，因为我已经剥离了所有其他 JQuery（除了库本身）。

【解决方案4】：

试试这个选择器：

div.entry > div.box:nth-child(3n)

【讨论】：