2011-08-03 36 views
115

にDIV内のクラスでアイテムを選択します:私は内側のdivを選択するセレクタを使用することができるようにしたいどのように私は、次のHTML持ってjQueryの

<div id="mydiv"><div class="myclass"></div></div>

のが、 "のための具体的なmydiv "コンテナ。 JQueryでこれをどうすれば実現できますか?

答えて

243

試してみてください。

$('#mydiv').find('.myclass'); 

JS Fiddle demo

または:

$('.myclass','#mydiv'); 

JS Fiddle demo

または:

$('#mydiv .myclass'); 

JS Fiddle demo

参考文献:

+1

2番目の2つは動作しませんが、見つけるOKです。 2番目の2つはすべてのクラス= myclassを選択し、すべてのid = mydivを選択します)と思います。 – czupe

+2

@czupe:no、コンテキストセレクタのアプローチが異なるように書かれているのに対し、jQueryは内部的に同じ$( '#mydiv')find( '。myclass');というアプローチを最初のコードスニペットで使用します。ちなみに: '...すべての 'id = mydiv'を選択しますか?ページ内の特定のid(***はドキュメント内で一意でなければなりません)(http://www.w3.org/TR/ html401/struct/global.html#h-7.5.2))。 –

+0

@DavidThomasさて、私は$( '#mydiv .myclass')を試しました。それはmydiv内のdivよりむしろclass myclassを持つdivをすべて選択することになりました。 – user3281466

19

あなたはそれをあなたがCSSセレクタを適用するのと同じ方法でやるこの

$("#mydiv div.myclass") 
+0

または、もしそれが 'div'かどうか気にしないなら、 ')$("#mydiv .myclass ")に単純化することができます。 –

+0

@Michael - はい、私たちはちょうど.mycalsと言うことができますが、divを知っていればdiv.myclassは検索を高速化します。 – ShankarSangoli

+0

@Shankar、それはおそらくそれをより速く、むしろ遅くすることはありません。 jqueryがsizzleを使用し、ネイティブ 'document.queryselectorall'を使用していないと仮定すると、おそらく同じ方法で検索し、あなたの場合は**余分な**チェックを行います。ネイティブ実装でも同様のことが起こる可能性があります。 – davin

10

を試してみてください。 instanseのためにあなたが

$("#mydiv > .myclass") 

または

$("#mydiv .myclass") 

を行うことができ、最後の一つはMyClassの内部にMyClassのを含め、myDiv内部のすべてのMyClassにマッチします。

1

これを代わりに試してください$(".video-divs.focused")これは、フォーカスされたvideo-divを探している場合に機能します。

1がより効率的かつ迅速
-2

...

$('#mydiv').find('.myclass').html('<span>Hello World</span>'); 
+1

3年後に受け入れられたものとほぼ同じ回答を追加しても、誰のためにも価値はありません。 –

3

あなたはクラス属性を持つすべての要素を選択したい場合はあなただけのdiv要素を選択したい場合は、「MyClassの」

$('#mydiv .myclass'); 

を使用クラス属性 "myclass"を使用しています。

$("div#mydiv div.myclass"); 

jqueryセレクタの詳細を参照してくださいこれらはarticles

関連する問題