jQueryでthisの子要素を取得するやり方いろいろ

jQueryを使っていて、thisとその子要素を同時に指定したい場合がある。

結構いろんなやり方があるみたいで、取りあえず使いやすそうなので下の3通り。

1. $("hoge",this)
2. $(this).children("hoge")
3. $(this).find("hoge")

一番上がシンプルでいいかと思うんですが、取得したいthis直下の要素名をthisの手前に書くんですね…

使いどころは多そうですが、例えば下みたいなの。「Click1」をクリックしたらその直下の<div>が隠れるようにしたい場合とか。

<ul>
　　<li>Click1
　　　　<div>
　　　　　　<h2>Menu1</h2>
　　　　　　<p>text1</p>
　　　　</div>
　　</li>
　　<li>Click2
　　　　<div>
　　　　　　<li>Menu2</li>
　　　　　　<li>text2</li>
　　　　</div>
　　</li>
</ul>

普通に$("li").click(function(){$("div").slideToggle();})では全ての<div>要素が選択されてしまうので、thisを組み合わせてクリックされた<li>直下の<div>だけを選びたいと。

$("li").click(function(){
　$("div",this).slideToggle();
});

$("li").click(function(){
　$(this).children("div").slideToggle();
});

$("li").click(function(){
　$(this).find("div").slideToggle();
});

ということみたいです。

一番上の$("hoge",this)という書き方のケースで、これを逆にして$(this,"hoge")とすると、thisの親要素を指定できる――かというとそんなことはなく、単にthisだけが選ばれます。そういうもんらしい。

ということで実例。

<ul id="testcode">
　<li>クリックで開閉します
　　<div>
　　　<h3>Menu</h3>
　　　<p>text</p>
　　</div>
　</li>
　<li>クリックで開閉します
　　<div>
　　　<h3>Menu</h3>
　　　<p>text</p>
　　</div>
　</li>
</ul>
</div>
<script type="text/javascript">
;jQuery(function($){
  $("#testcode li").click(function(){
　  $("div",this).slideToggle();
  });
});