jQuery :nth-child() 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2026885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery :nth-child() selector
提问by mtwallet
Hi please look at the HTML below. I am trying to use jQuery to get every 3rd instance on the DIVs with class="box"contained within the DIV with class="entry"to have a no right hand margin:
您好，请查看下面的 HTML。我正在尝试使用 jQuery 来获取class="box"包含在 DIV 中的 DIV 上的每个第三个实例，并且class="entry"没有右手边距：
My HTML code:
我的 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-->
My attempt with jQuery:
我对 jQuery 的尝试：
<script>
$(document).ready(function(){
$("div.entry:nth-child(3)").css("margin", "0px");
});
</script>
I can't get this working can anyone please help? Thanks in advance!
我无法完成这项工作，有人可以帮忙吗？提前致谢！
thanks to all who helped the solution provided is indeed correct. I am coding up a supplied template and found that JQuery had been set to run in compatibility mode hence $ was the problem.
感谢所有帮助提供的解决方案确实是正确的。我正在编写一个提供的模板，发现 JQuery 已设置为以兼容模式运行，因此 $ 是问题所在。
回答by dxh
From the docs (my emphasis)
从文档（我的重点）
Matches all elements that are the nth-child of their parentor that are the parent's even or odd children.
匹配属于其父项的第 n 个子项或父项的偶数或奇数子项的所有元素。
You're currently selecting the parent, while you should be selecting children:
您当前正在选择父级，而您应该选择子级：
$("div.entry > div:nth-child(3)").css("margin", "0px");
回答by Boris Lutskovsky
nth-child also seems to be non-0 indexed. Keep that in mind if you're used to indexing at 0.
nth-child 似乎也被非 0 索引。如果您习惯于索引为 0，请记住这一点。
回答by Dominic Rodger
Your :nth-childselector does not reference n, and you need to reference the inner divin your selector.
您的:nth-child选择器未引用n，您需要div在选择器中引用内部。
Try:
尝试：
$(document).ready(function(){
$("div.entry div:nth-child(3n)").css("margin", "0px");
});
回答by Gumbo
Try this selector:
试试这个选择器：
div.entry > div.box:nth-child(3n)
