jQueryでイベントが発生した要素を指定する$(this)。
jQueryを初めて使った頃は$(this)ってなんだ!?
なんで普通に<li>なら$(“li”)じゃだめなの～!?
なんて思いましたが大きな違いですよね。
そして次につまづいたのが、$(this)の親要素、子要素、隣接要素やらは一体どうやって指定するのだろ～～～でした。
<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>
<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).parent() //①
$(this).parent(“ul”) //②
});
$(this).parent() //①
$(this).parent(“ul”) //②
});
①すぐ上の親要素を指定（それより上は指定できません）
②先祖要素を指定（parent()より上にさかのぼることができます）
上記のソースの場合、②ならdivを指定できますが、①ではulのみです。
$(this)の子要素、子孫要素を指定する
$(“li”).click(function(){
$(this).children(“span”) //①
$(this).find(“span”) //②
$(“span”,this) //③
});
$(this).children(“span”) //①
$(this).find(“span”) //②
$(“span”,this) //③
});
①子要素を指定（孫要素以下は指定できません）
②③子孫要素を指定（孫要素以下も指定できます）
$(this)の隣接要素を指定する
$(“li”).click(function(){
//次
$(this).next(“li”) //①
$(“+li”,this) //②
$(this).nextAll(“li”) //③
//前
$(this).prev(“li”) //④
$(this).prevAll(“li”) //⑤
});
//次
$(this).next(“li”) //①
$(“+li”,this) //②
$(this).nextAll(“li”) //③
//前
$(this).prev(“li”) //④
$(this).prevAll(“li”) //⑤
});
（）内は.menu01をクリックした場合に指定される要素
①②すぐ次にある要素を指定（.menu02）
③次以降にある全ての要素を指定（.menu02、.menu03）
（）内は.menu03をクリックした場合に指定される要素
④すぐ前にある要素を指定（.menu02）
⑤前にある全ての要素を指定（.menu02、.menu01）