【jQuery】一番近い特定の兄弟要素のみ取得

HTML, JavaScript, jQuery

この記事は最終更新日から1年以上が経過しています。

はじめに

任意の要素から一番近い特定の要素のみを取得したかったので調べてみました。
以下のようなHTMLで、item2のli要素から一番近いlistクラスを持ったli要素（item4）を取得したい、ということです。
<ul>
  <li>item1</li>
  <li id="target">item2</li>
  <li>item3</li>
  <li class="list">item4</li>
  <li class="list">item5</li>
</ul>

兄弟要素の取得

nextAllメソッドで、兄弟要素かつ次の要素すべてを取得できます。
上のHTMLの例で以下のように書くと、
$('li#target').nextAll();

item3,4,5のli要素を取得することができます。

セレクタを指定することで、特定の要素に絞ることも可能です。
$('li#target').nextAll('.list');

item4,5のli要素を取得することができます。

一番近くのみ取得

item2から一番近くのみを取得したい場合、セレクタのフィルタを使用したらできました。
最初の要素を選択するfirstフィルタを使用します。
$('li#target').nextAll('.list:first');

これでitem4のli要素のみを取得することができました。

前の要素の場合

nextAllメソッドと同じように、prevAllメソッドがあります。
以下のようなHTMLで、
<ul>
  <li class="list">item1</li>
  <li class="list">item2</li>
  <li>item3</li>
  <li id="target">item4</li>
  <li>item5</li>
</ul>

item4のli要素から一番近いlistクラスを持ったli要素（item2）を取得したいときは、
$('li#target').prevAll('.list:first');

と書くことでitem2のli要素のみが取得できます。

生JSで書く

生のJavaScriptで書けないかと考えてみました。
次の要素の場合は以下のように書けます。
document.querySelector('li#target ~ .class');

document.querySelectorAll('li#target ~ .class')[0];

前の要素の場合は調査中。

まとめ

firstフィルタを使うことで、任意の要素から一番近い特定の要素を取得することができました。
様々なセレクタがあるので、上手く使うと要素の取得が簡潔に書けそうです。

HTML, JavaScript, jQuery