jquery - 如何使用 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>兄弟姐妹，但我只想要第一个，如代码中所示。

我怎样才能做到这一点？

Answer 1

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

或者

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

会成功的

Answer 2

尝试这个：

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

或纯 css 选择器（未检查性能，但它可能是最快的解决方案，因为它使用.querySelectorAll）：

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

Answer 3

正如 Olivier 建议的那样 .first() 或 p:first 会满足您的需求，尽管对我们来说更通用的解决方案是 .eq(n) - 其中 n 是您想要从 0 开始的数字。

例如，要选择#myDiv 的第一个同级段落，您可以使用：

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

要针对第三段，您要做的就是更改数字。请记住，当它从 0 开始时，您实际上需要从所需目标中取出一个：

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