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

この記事は約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を使って…いや気持ち悪いか。

エンデ・バタローをフォローする
javascriptjQuery

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

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

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

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