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の記述を大きく効率化することができることがあります。
複雑に見える動きでもシンプルなコードで実現できると、メンテナンス性も向上します。有用に利用しましょう。