【jQuery】隣の要素・兄弟要素の取得方法

ボタンを押したら、隣の要素にクラスを付けたり外したり色々便利な兄弟要素の取得方法のご紹介です！
jQueryで取得する書き方が色々とあるので、それぞれの動きをデモで確認しよう！

デモ

HTML、jQueryはこんな感じです。

HTML

<div class="brother">
  <p class="title">「ワタシ」から見て兄弟要素をアラートするよ</p>
    <ul class="list">
      <li>ネキ（姉）</li>
      <li>ニキ（兄）</li>
      <li class="watasi">ワタシ</li>
      <li>いもうと</li>
      <li>おとうと</li>
    </ul>
  <ul class="btn1">
    <li class="next">ワタシの次の要素<span>next()</span></li>
    <li class="prev">ワタシの前の要素<span>prev()</span></li>
    <li class="siblings">ワタシ以外全要素<span>siblings()</span></li>
  </ul>
  <ul class="btn2">
    <li class="nextAll">ワタシ以降の全要素<span>nextAll()</span></li>
    <li class="prevAll">ワタシ以前の全要素<span>prevAll()</span></li>
    <li class="contents">ワタシ含む全要素<span>contents()</span></li>
  </ul>
</div>

jQuery

// ワタシの次の要素（いもうと）
$(".next").on("click", function() {
  var val = $(".watasi").next();
  alert(val.text());
});
// ワタシの前の要素（ニキ）
$(".prev").on("click", function() {
  var val = $(".watasi").prev();
  alert(val.text());
});
// ワタシ以外全要素（ネキ、ニキ、いもうと、おとうと）
$(".siblings").on("click", function() {
  var val = $(".watasi").siblings();
  alert(val.text());
});
// ワタシ以降の全要素（いもうと、おとうと）
$(".nextAll").on("click", function() {
  var val = $(".watasi").nextAll();
  alert(val.text());
});
// ワタシ以前の全要素（ネキ、ニキ）
$(".prevAll").on("click", function() {
  var val = $(".watasi").prevAll();
  alert(val.text());
});
// ワタシ含む全要素（ネキ、ニキ、ワタシ、いもうと、おとうと）
$(".contents").on("click", function() {
  var val = $(".list").contents("li");
  alert(val.text());
});

説明

次の要素を取得する「next()」

jQueryの「next()」は、目的要素の次を取得するメソッド。
デモ「$(“.watasi”).next()」のように利用して、目的要素の次の要素が取得できる。

前の要素を取得する「prev()」

jQueryの「prev()」は、目的要素の前を取得するメソッド。
デモ「$(“.watasi”).prev()」のように利用して、目的要素の前の要素が取得できる。

目的要素以外の全要素を取得する「siblings()」

jQueryの「siblings()」は、目的要素以外の全ての要素を取得するメソッド。
デモ「$(“.watasi”).siblings()」のように利用して、目的要素以外の全ての要素が取得できる。

目的要素以降の全要素を取得する「nextAll()」

jQueryの「nextAll()」は、目的要素以降の全ての要素を取得するメソッド。
デモ「$(“.watasi”).nextAll()」のように利用して、目的要素以降全ての要素が取得できる。
「next()」が次の要素で「nextAll()」が以降全てってわかりやすいよね。

目的要素以前の全要素を取得する「prevAll()」

jQueryの「prevAll()」は、目的要素以前の全ての要素を取得するメソッド。
デモ「$(“.watasi”).prevAll()」のように利用して、目的要素以前全ての要素が取得できる。
このメソッドも「next()」同様に「prevAll()」で以前全てを取得できるの分かりやすい。

目的要素を含む全要素を取得する「contents()」

jQueryの「contents()」は、他のメソッドとは違い、子要素全てを取得するメソッド。
子要素を取得するのでデモ「$(“.list”).contents(“li”)」のように利用して、
「$(“.watasi”)」からではなく親要素の「$(“.list”)」から子要素の「$(“li”)」を取得してるよ。
子要素を取得するから「contents()」を使わなくても。「find(“li”)」とか「children()」とかでも同じこができるね！

兄弟要素を取得する方法って色々あるよね。
nextとかprevとか感覚的でわかりやすいし、それにAllを付ければっていうのもめちゃ分かりやすい。
でもsiblingsとcontentsはわかりにくいね。
分からなかったら検索でココに来てみてね！

あまり関係ないけど、僕は兄しかいなかったから思春期の頃は、姉ちゃんがいる友達がうらやましかったな～。
現実でもprevを使って…いや気持ち悪いか。