Jquery查找类型的第一个直接子级答案

【问题标题】：Jquery Find first direct child of a typeJquery查找类型的第一个直接子级
【发布时间】：2014-04-02 18:32:51
【问题描述】：

我正在寻找一种方法来找到元素的第一个直接子元素，具有精确的类型。

让我们想象一下这个标记：

<div id="mainDiv">
    <div id="otherDiv">
        <p> Stuff </p>
    </div>
    <p> Stuff 2 </p>
    <p> Stuff 3 </p>
</div>

所以在这里，我想得到的是“Stuff 2”的第一段成为一个直接的孩子。

如果使用 jquery，我会执行 $('#mainDiv').find('p:first'); 之类的操作，我会在第一个 div 中获取段落。

我需要的是忽略嵌套的孩子，只取第一个直接的孩子。我该怎么做？

【问题讨论】：

【解决方案1】：

使用直接后代选择器>

$('#mainDiv > p:first')

甚至children()

$('#mainDiv').children('p').first()

【讨论】：

我宁愿在这里使用标准的 CSS 表单：$('#mainDiv > p:first-child')。所以它会直接使用原生的document.querySelect()实现。
@c-smile - 但第一段不是第一个孩子，所以会失败。
@adeneo，我正在阅读这个“元素的第一个直接子元素，具有精确类型”，正是这种情况p:first-child
@c-smile - 你错了，p:first-child 得到的段落是其父级的第一个子级，因此对于发布的标记，它会失败，因为 div 是第一个子级。对于它的类型的第一个元素，我们使用选择器和:first 来获取集合中的第一个元素。
@adeneo 让我们试着从字面上理解这个短语：“元素的第一个直接子元素”——确切地说是> *:first-child。而“精确类型”我正在阅读为“精确类型”。所以最后的条件是> type:first-child。