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

javascript
この記事は約6分で読めます。
スポンサーリンク

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

デモ

「ワタシ」から見て兄弟要素をアラートするよ

  • ネキ(姉)
  • ニキ(兄)
  • ワタシ
  • いもうと
  • おとうと
  • ワタシ以外全要素siblings()
  • ワタシ以降の全要素nextAll()
  • ワタシ以前の全要素prevAll()
  • ワタシ含む全要素contents()

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を使って…いや気持ち悪いか。

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました