2019.05.15

コーディング

jQueryで$(this)を使用したときの子要素や隣接要素の指定方法

子供が手を繋いでいるイメージ

jQueryで、同じ動きをする繰り返し要素などに利用することが多い$(this)。シンプルな動きでも$(this)で指定した要素の子要素や隣接要素を指定する場合が多く、これらの違いがわかるとできることに大きな違いがあります。
今回はそんな$(this)に付随するjQueryセレクタを紹介します。

$(this)とセレクタの位置関係

サンプルhtmlは以下です

<div>
  <ul>
    <li class=”menu01″><span class=”sp01″>メニュー01</span></li>
    <li class=”menu02″><span class=”sp02″>メニュー02</span></li>
    <li class=”menu03″><span class=”sp03″>メニュー03</span></li>
  </ul>
</div>

$(this)の子要素、子孫要素を指定

$(“li”).click(function(){
  $(this).children(“span”) //1
  $(this).find(“span”) //2
});
.children
1、子要素を指定します。$(this)直下の要素のみ指定することができます。
.find
2、子要素を指定します。$(this)以下の要素から該当するものを指定することができます。

$(this)の隣接要素を指定

  $(“li”).click(function(){
    $(this).next(“li”) //1
    $(this).nextAll(“li”) //2
    $(this).prev(“li”) //3
    $(this).prevAll(“li”) //4
  });

.menu01をクリックした場合、その次の要素を選択するセレクタは以下です。

.next
1、すぐ次にある要素を指定します。この場合.menu02になります。
.nextAll
2、次以降にある全ての要素を指定します。この場合.menu02、.menu03になります。

.menu03をクリックした場合、その次の要素を選択するセレクタは以下です。

.prev
3、すぐ前にある要素を指定します。この場合.menu02になります。
.prevAll
4、手前にある全ての要素を指定します。この場合.menu01、.menu02になります。

まとめ

記述方法やセレクタを知っているだけでjQueryの記述を大きく効率化することができることがあります。
複雑に見える動きでもシンプルなコードで実現できると、メンテナンス性も向上します。有用に利用しましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する