如何获取父元素下指定类型的第N个子元素（如第二个div）？

完全可以按照「选择父元素下第二个div类型子元素」的方式定位目标元素，这里有两种常用且语义明确的实现方法：

方法1：使用CSS :nth-of-type(2) 选择器 #

这个选择器专门针对同类型的子元素进行计数，完美匹配你的需求。直接用下面的jQuery选择器即可：

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

它会只统计#top下所有<div>类型的子元素，然后选中第二个——也就是你标注了「Get this one」的那个元素。

对比你之前用的$('#top:nth-child(4)')，后者是统计父元素下所有类型的子元素（包括<h1>、<h2>这些），取第4个；而:nth-of-type只关注div类型，就算后续HTML结构里新增了其他非div的子元素，这个选择器依然能精准命中目标，鲁棒性更强。

方法2：使用jQuery的.eq()方法 #

先选中#top下所有的div子元素，再通过索引取第二个（注意jQuery的索引是从0开始计数的）：

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

这种方式逻辑也很清晰，先获取所有符合条件的div集合，再定位到你需要的那一个。

结合你的HTML结构验证：

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

#top下共有3个div子元素，上述两种方法都能准确选中第二个（带「Get this one」的div）。

内容的提问来源于stack exchange，提问作者FoxyFish