jQueryの基礎：兄弟要素を操作する

サンプルはこちら。

See the Pen hBbKu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTML的に同じ階層にある要素、親でも子でもない要素は兄弟要素と言います。
IDやクラスを指定せず、直接兄弟を指定して操作できます。

HTML

<button class="next">「次」の兄弟要素をトグル</button>
<button class="prev">「前」の兄弟要素をトグル</button>
<button class="nextAll">「次以降」の兄弟要素をトグル</button>
<button class="prevAll">「前以前」の兄弟要素をトグル</button>

ボタンは上記のようにjQueryのフックとなるクラスが割り振られています。

そしてボタンの前後にボタンの兄弟要素となる<p>タグを配置しています。

JavaScript

$(function () {

  //「次」の兄弟要素をトグル
  $(".next").click(function(){
    $(this).next().toggle();
  });

  //「前」の兄弟要素をトグル
  $(".prev").click(function(){
    $(this).prev().toggle();
  });

  //「次以降」の兄弟要素をトグル
  $(".nextAll").click(function(){
    $(this).nextAll().toggle();
  });

  //「前以前」の兄弟要素をトグル
  $(".prevAll").click(function(){
    $(this).prevAll().toggle();
  });

});

それぞれボタンに付与した関数をフックに処理を実行させています。

それぞれ下記の抽出用関数を使っています。

.next() //「次」の兄弟要素を抽出
.prev() //「前」の兄弟要素を抽出
.nextAll() //「次以降全て」の兄弟要素を抽出
.prevAll() //「前以前全て」の兄弟要素を抽出

今回はクリックしたボタンを基点にその前後の<p>タグに処理をしている形です。

この手法を応用することでIDやクラスに依存しない汎用的な処理に役立てることができますが、HTMLの組み方には依存してしまうことになるので注意も必要です。