本記事では、jQueryでsiblings()・next()・nextAll()・prev()・prevAll()を使って兄弟要素を取得する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
サンプルコード
<!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)]
