jQueryで兄弟要素を取得する方法：siblings(), next(), prev()

jQueryで要素を取得する方法はたくさんあり、もちろん「兄弟要素」の取得も簡単に行えます。

兄弟要素とは、例えば以下のHTMLで言うと５つのliタグは、同じ親要素を持ち同じ階層にある要素なので兄弟要素となります。

HTML

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

兄弟要素の取得ができると、要素をeachやforを使うことなく一気に要素に対して操作が行えてとても便利です。

このHTMLを例に代表的な３つの兄弟要素の取得の仕方を紹介します。

.siblings() – 全ての兄弟要素を取得する

siblings()は、全ての兄弟要素を取得するメソッドです。siblings(“セレクタ”)とすることで、取得する要素の条件も指定することができます。

$(‘ul > li:first’)は、ul要素の子要素であるliの最初の要素を指定するものです。

jQuery

$('ul > li:first').siblings();

上記のコードで、取得できる要素はこちらです。

HTML

<li>one</li>
<li>two</li>
<li>three</li>

セレクタでは、一番最初のli要素を取得しましたが、siblingsメソッドによって全ての兄弟要素を取得することができました。

セレクタを、$(‘ul > li’); とすれば、li要素を全て取得することができます。しかし、メソッドチェーンなどで使う場合は、セレクタでは対応できないのでsiblings()などが使われます。

.next()/nextAll() – 次に隣接する兄弟要素を取得する

next()は、指定した要素の次にある兄弟要素を取得するメソッドです。

jQuery

$('ul > li:first').next();

上記のコードで、取得できる要素はこちらです。

HTML

<li>two</li>

セレクタでは、一番最初のli要素を取得しましたが、next()メソッドによってすぐ次にある要素を取得することができました。

似たメソッドでnextAll()メソッドがあり、こちらでは次以降にある全ての兄弟要素を取得することができます。

.prev()/prevAll() – 前に隣接する兄弟要素を取得する

prev()は、指定した要素の前にある兄弟要素を取得するメソッドです。

$(‘ul > li:last’)は、ul要素の子要素であるliの最後の要素を指定するものです。

jQuery

$('ul > li:last').prev();

li:lastにより<li>three</li>要素を取得できたため、その直前の要素の取得することができました。

<li>two<li>

またprev()にもprevAll()メソッドがあり、直前の全ての兄弟要素を取得することができます。

兄弟要素の取得は、英語も直観的でわかりやすいメソッドとなっています。メソッド名を忘れてしまっても、英単語を思い出せばすぐに使えるでしょう。