如何使用jQuery选择特定元素类型的第一个兄弟元素？

Question

HTML的结构如下所示：

<div id="myDiv"></div>
<img src="" />
<p></p> // I want to select this element 
<h1></h1>
<p></p>
<h2></h2>

基于我的起始元素<div id="myDiv">，还有几个<p>的兄弟元素，但我只想要第一个，就像代码中所看到的那样。

我该如何实现这个功能？

- Weblurk

---

与在jQuery中获取兄弟节点的最简洁方法密切相关（使用<img>元素而不是<br>，但原则相同）。 - Frédéric Hamidi

Answer 1

jQuery('#myDiv').siblings('p:first')

或者

jQuery('#myDiv').siblings('p').first()

会起到作用。

- OlivierH

Answer 2

试试这个：

jQuery('#myDiv ~ p').first()

或者纯 CSS 选择器（未经过性能测试，但可能是最快的解决方案，因为它使用 querySelectorAll）：

jQuery('#myDiv ~ p:first-of-type')

- Engineer

Answer 3

如Olivier所建议的，.first()或p:first将适合您的需求，但更一般的解决方案是使用.eq(n) - 其中n是从0开始的数字。

例如，要选择#myDiv的第一个兄弟段落，您应该使用：

    jQuery('#myDiv').siblings('p').eq(0);

要定位到第三段，你只需要更改数字。记住，由于它从0开始，你实际上需要将所需目标减去1：

    jQuery('#myDiv').siblings('p').eq(2);

- Sj.

---

问题是，p不是#myDiv的子元素。这个CSS选择器#myDiv p只会选择#myDiv内部的p。 - Prasanth K C