Question

请考虑以下代码段：

<div>
    <div class="user_photo"></div>
    <h5><b>Jane Doe,</b> 01 May 2016</h5>
</div>
<div>
    <div class="user_photo"></div>
    <h5><b>Jane Doe,</b> 01 May 2016</h5>
</div>

搜索jQuery('div.user_photo:nth-child(0)')时，我得到：

[<div class="user_photo"></div>, <div class="user_photo"></div>]

为什么我不从这个数组中获得第一个div？如何在不添加新类的情况下获取数组的第一个元素？

Answer 1

nth-child选择器实际上意味着所选元素是否是其父级的nth-child。

因此，在您的情况下，.user_photo是其每个父div的第一个孩子。要对此进行测试，请为其中一个元素切换.user_photo div和h5，然后您会看到它只选择其中一个.user_photo div。

为了做你想做的事，我会在那个匿名div上放一个课，然后做.anonymous-div:first-child .user_photo。如果你不能在该div上放一个类，那么你可能需要使用另一个具有更多唯一标识符的父元素遍历它，所以类似于#common-parent > div:first-child .user_photo

Answer 2

选择器div.user_photo:nth-child(0)指的是每个div都有类user_photo 和是他们父母的第一个孩子。

要“获取”此数组的第一个元素，您可以使用getElementsByClassName函数，假设您发布的代码段是第一次出现具有user_photo类的div。

document.getElementsByClassName("user_photo")[0];
// the first div having user_photo as a class

Answer 3

尝试做第n种类型。

jQuery('div.user_photo:nth-of-type(0)')

为什么nth-child会返回？

3 个答案: