Question

示例代码：

<div id="top">
    <h1></h1>
    <div></div>
    <h2></h2>
    <div>Get this one</div>
    <h3></h3>
    <div></div>
</div>

所以我知道我可以使用

$('#top:nth-child(4)').etc...

但是我可以通过说“获得第二个孩子是div元素”而不仅仅是“获得第四个子元素”来获得这个吗？

希望这是有道理的。

Answer 1

是的，nth-of-type与标记类型本身（在本例中为div）有关，而不是与类或子元素有关：

$('#top > div:nth-of-type(2)').etc.

在评论中的其他问题之后添加：

您无法使用CSS选择器选择具有特定类的第n个DIV，但使用jQuery。

$("#top > div.x").eq(1).css("color", "blue");

eq()选择集合中的第n个元素（即在之前的选择中）。请注意，其索引从0开始，因此eq(1)选择集合中的第二个元素：

＆＃13;

$("#top > div.x").eq(1).css("color", "blue");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
    <h1>H1</h1>
    <div class="x">1st DIV with class "x"</div>
    <h2>H2</h2>
    <div>DIV</div>
    <h3>H3</h3>
    <div>DIV</div>
    <div class="x">2nd DIV with class "x"</div>
    <h2>H2</h2>
    <div>DIV</div>
    <h3>H3</h3>
    <div class="x">3rd DIV with class "x"</div>
</div>

＆＃13;

Answer 2

$('#top > div').get(1)或$('#top div')会做您想做的事。它说＆＃34;在#top中立即抓取div ，然后选择第二个。＆＃34;在这种情况下，.get(1)（以及$('#top > div:nth-of-type(2)')）会产生相同的结果，但这意味着＆＃34;抓住所有作为＃top＆＃34;后代的div，即偶数#top＆gt ; div> div＃depth2将被计算在内。

正如Johannes指出的那样，(adsbygoogle=window.adsbygoogle||[]).requestNonPersonalizedAds=1是一个短代码，但我首先要熟悉基础知识 - 你可以选择带有插入符号（＆gt;）的类型的直接子节点和所有类型的后代空间（）。

Answer 3

$('#top').children('div').eq(1).html()

以上线条暗示;如果你从0算起，得到第二个div，它是top div的孩子。

Answer 4

您可以使用选择器类型（数字）。这是给你的

CSS

#top > div:nth-of-type(2) {
  /*Your css*/
}

或在Jquery

$("#top > div:nth-of-type(2)").method();

不过，它是一个相同的选择器。我只是在Jquery选择器

上使用css nth-of-type(2)选择器

获得第n个：特定元素类型的子元素

4 个答案: