未知级别的jQuery Selector nth-child（n）？答案

【问题标题】：jQuery Selector nth-child(n) under unknown level?未知级别的jQuery Selector nth-child（n）？
【发布时间】：2012-06-26 23:32:28
【问题描述】：

对于本示例场景中的第二个<h3>World!</h3>（请注意<..>元素是所有级别的未知元素）：

<div></div>
<div class="class1">
    <..>
        <h3>Hello!</h3>
        <..>
            <h3>World!</h3>
        </..>
    </..>
</div>

让假设我们只知道：

所以我想使用nth-child(n) 选择器。但我不能这样使用：

$("div.class1 h3:nth-child(2)").html();

现在我意识到nth-child(n) 选择器只能选择父元素的Direct Child，仪式？

我可以使用nth-child(n) 选择器让它工作吗？

【问题讨论】：

【解决方案1】：

$("div.class1 h3:eq(1)").html();

首先选择div.class1深度下的所有h3，然后再选择第二个。

【讨论】：

【解决方案2】：

我想你正在寻找.eq()。

$('h3').eq(1).html();

在本例中，jQuery 返回一个由h3 元素组成的数组，并且您正在选择数组中的第二项。

【讨论】：

【解决方案3】：

$("div.class1 h3") 会给你一个包含两个 h3 的数组。所以你可以使用$("div.class1 h3")[1] 来获取第二个匹配元素。

【讨论】：

【解决方案4】：

查找包含 h3 的类中的所有元素，隔离每个元素的最后一个

$("div.class1 *:has(h3)").each(function(){   
    $(this).children('h3:last').css('color','red')
})

【讨论】：