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);

3 番目の段落をターゲットにするには、番号を変更するだけです。0 から始まるので、目的のターゲットから効果的に 1 を奪う必要があることに注意してください。

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