jQueryのthisから親要素、子要素、隣接要素を指定する方法


jQueryを使用しているとthisの要素をよく使います。
その際に、thisからたどって要素を操作したいことがよくあるのでメモしておきます。

thisの親要素、先祖要素を指定する

parent()を使用します。
引数に要素を指定するのと指定しないので挙動が変わります。

$(this).parent()

thisの1つ上の親要素を指定します

$(this).parent(“div”)

thisよりも上の親要素からdiv要素を探して指定します

thisの子要素、孫要素を指定する

$(this).children(“div”)

thisの下の子要素からdivを探して指定します。
直下の子要素のみでそれ以上深い孫要素は探しません。

$(this).find(“div”)

thisの下の子、孫要素からdivを探して指定します。
これは、もっと簡単な書き方があります。

$(“div”,this)

同じくthisの下の子、孫要素からdivを探して指定します。

thisの隣接要素を指定する

$(this).next(“div”) 

thisのすぐ次にあるdiv要素を指定します。

$(this).nextAll(“div”) 

thisの次以降にある全てのdiv要素を指定します。

$(this).prev(“div”) 

thisのすぐ前にあるdiv要素を指定します。

$(this).prevAll(“div”) 

thisの前にある全てのdiv要素を指定します。