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）
弊社では社内制作にこだわるHTML構築技術から、WEBサイトの正確なコーディングをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。
WEBサイト制作実績3,000サイト以上！
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら
