jQuery 选择器 nth-child(n) 在未知级别下

Question

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

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

让我们假设我们只知道：

• Top Parent <div class="class1">和Target Child Elements <h3>
• 中级是unknowns。可以是<p>的，也可以是<div>的，也可以是<ul>的。

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

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

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

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

Answer 1

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

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

Answer 2

我想你正在寻找.eq（）。

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

在此示例中，jQuery 返回一个包含 h3 元素的数组，而您正在选择数组中的第二项。

Answer 3

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

Answer 4

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

演示：（嵌套版本）http://jsfiddle.net/3daHU/1/

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