jQuery

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

本記事では、jQueryでsiblings()・next()・nextAll()・prev()・prevAll()を使って兄弟要素を取得する方法について解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

サンプルコード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <ul>
      <li class="orange">オレンジ</li>
      <li class="strawberry">イチゴ</li>
      <li class="apple">リンゴ</li>
      <li class="banana">バナナ</li>
      <li class="grape">ブドウ</li>
    </ul>
  </body>
</html>

全ての兄弟要素を取得

全ての兄弟要素を取得する場合、siblings()メソッドを使います。siblings()メソッドにはセレクタを指定することができるため、全ての兄弟要素を対象にセレクタに一致している要素だけ取得したい場合はセレクタを指定しましょう。

siblings()メソッドの使い方は以下のとおりです。

/* ↓全ての兄弟要素を取得 */
$("要素名").siblings();

/* ↓セレクタに一致した兄弟要素のみ取得 */
$("要素名").siblings("セレクタ");

サンプルコードを使った実行結果は以下のとおりです。

/* ↓全ての兄弟要素を取得 */
$(".apple").siblings();
// 実行結果:S.fn.init(4) [li.orange, li.strawberry, li.banana, li.grape, prevObject: S.fn.init(1)]

/* ↓イチゴとバナナのみ取得 */
$(".apple").siblings(".strawberry, .banana");
// 実行結果:S.fn.init(2) [li.strawberry, li.banana, prevObject: S.fn.init(1)]

対象要素の次に配置されている兄弟要素を取得

対象要素の次に配置されている兄弟要素を取得する場合、next()メソッドまたはnextAll()メソッドを使います。セレクタも指定することができるため、セレクタに一致している要素だけ取得することも可能です。

next()メソッドとnextAll()メソッドの違いは、取得できる要素数と対象範囲です。next()メソッドの場合、対象範囲は次に配置されている兄弟要素のみのため、取得できる要素数も1つだけです。それに対し、nextAll()メソッドの場合、対象範囲は次以降に存在する全ての要素が対象となるため、要素数も複数取得することができます。

next()メソッドとnextAll()メソッドの使い方は以下のとおりです。

/* ↓対象要素の次に配置されている要素を取得 */
$("要素名").next();

/* ↓対象要素の次以降に配置されている全ての要素を取得 */
$("要素名").nextAll();

/* ↓対象要素の次以降に配置されている要素の中でセレクタに一致している要素を取得 */
$("要素名").nextAll("セレクタ");

サンプルコードを使った実行結果は以下のとおりです。

/* ↓対象要素の次に配置されている要素を取得 */
$(".apple").next();
// 実行結果:S.fn.init [li.banana, prevObject: S.fn.init(1)]

/* ↓対象要素の次以降に配置されている全ての要素を取得 */
$(".apple").nextAll();
// 実行結果:S.fn.init(2) [li.banana, li.grape, prevObject: S.fn.init(1)]

/* ↓対象要素の次以降に配置されているブドウのみ取得 */
$(".apple").nextAll(".grape");
// 実行結果:S.fn.init [li.grape, prevObject: S.fn.init(1)]

対象要素の前に配置されている兄弟要素を取得

対象要素の前に配置されている兄弟要素を取得する場合、prev()メソッドまたはprevAll()メソッドを使います。セレクタも指定することができるため、セレクタに一致している要素だけ取得することも可能です。

prev()メソッドとprevAll()メソッドの違いは、next()メソッドとnextAll()メソッドと同様に取得できる要素数と対象範囲になります。

prev()メソッドとprevAll()メソッドの使い方は以下のとおりです。

/* ↓対象要素の前に配置されている要素を取得 */
$("要素名").prev();

/* ↓対象要素の前以降に配置されている全ての要素を取得 */
$("要素名").prevAll();

/* ↓対象要素の前以降に配置されている要素の中でセレクタに一致している要素を取得 */
$("要素名").prevAll("セレクタ");

サンプルコードを使った実行結果は以下のとおりです。

/* ↓対象要素の前に配置されている要素を取得 */
$(".apple").prev();
// 実行結果:S.fn.init [li.strawberry, prevObject: S.fn.init(1)]

/* ↓対象要素の前以降に配置されている全ての要素を取得 */
$(".apple").prevAll();
// 実行結果:S.fn.init(2) [li.strawberry, li.orange, prevObject: S.fn.init(1)]

/* ↓対象要素の前以降に配置されているオレンジのみ取得 */
$(".apple").prevAll(".orange");
// 実行結果:S.fn.init [li.orange, prevObject: S.fn.init(1)]

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村