Last-Modified: 2022/06/30

jQueryでの兄弟要素の取得方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでの兄弟要素の取得方法について、簡単に解説していきます。

siblingsメソッド

jQueryのsiblingsメソッドでは要素の全ての兄弟要素を取得可能です。

<ul>
  <li>りんご</li>
  <li>ぶどう</li>
  <li>みかん</li>
</ul>

例えば、果物をリスト化した上記のul要素とli要素のHTMLがあると想定します。

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

上記のように、いずれかのli要素に対してsiblingsメソッドを使うことによって、全てのli要素を取得できます。

nextメソッド

今回も以下のHTMLを想定します。

<ul>
  <li>りんご</li>
  <li>ぶどう</li>
  <li>みかん</li>
</ul>

以下のようにnextメソッドを使うことで指定した要素の直後の兄弟要素を取得できます。

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

指定した要素より後の全ての兄弟要素を取得する場合には、以下のようにnextAllメソッドが使えます。

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

prevメソッド

引き続き、以下のHTMLを想定します。

<ul>
  <li>りんご</li>
  <li>ぶどう</li>
  <li>みかん</li>
</ul>

以下のようにprevメソッドを使うことで指定した要素の直前の兄弟要素を取得可能です。

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

また、以下のようにprevAllメソッドを使うことによって、指定した要素より前の全ての兄弟要素を取得できます。

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

• facebook
• Tweet
• Read Later