DIV içinde sınıflı bir öğeyi nasıl seçebilirim?

142

Aşağıdaki HTML var:

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

İçini seçen div, ancak mydivkonteynere özgü bir seçici kullanabilmek istiyorum . Bunu jQuery ile nasıl başarabilirim?

— Idan Shechter
kaynak

285

Deneyin:

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

JS Fiddle demosu .

Veya:

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

JS Fiddle demosu .

Veya:

$('#mydiv .myclass');

JS Fiddle demosu .

Referanslar:

find().
Seçici bağlamı .

find()Belgelerden öğrenmeniz iyi :

.Find () ve .children () yöntemleri benzerdir, ancak ikincisi DOM ağacında yalnızca bir düzey seyahat eder.

— David, Monica'yı eski durumuna getirdi
kaynak

2

ikincisi işe yaramaz, ama bul tamam. İkinci iki her sınıf = myclass seçecek ve her id = mydiv seçin) bence.

— czupe

2

@czupe: hayır, bağlam seçici yaklaşımı farklı yazılırken, jQuery dahili $('#mydiv').find('.myclass');olarak ilk kod snippet'inde kullanılanla aynı yaklaşımı uygular . Bu arada: '... her birini seç id=mydiv'? Sadece Orada gerektiğini şimdiye verilen bir kullanım olacak idbir sayfaya (bir id gerekir belge içinde benzersiz olması ).

— David, Monica'yı

@DavidThomas Ben $ ('# mydiv .myclass'); ve bu, sadece mydiv içindeki div'lardan ziyade, sınıf myclass sınıfına sahip tüm div'leri seçerek sona erdi.

— user3281466

@ user3281466: gerçekten mi? Bu pek olası görünmüyor, probleminizi yeniden üretebilir misiniz ?

— David, Monica

nasıl div bir şey kontrol ve sonra koymak: değil ()

— SuperUberDuper

20

Bunu dene

$("#mydiv div.myclass")

— ShankarSangoli
kaynak

Veya bir div(ya da her zaman a divolacaksa) umrunda değilse $ ("# mydiv .myclass") yöntemini basitleştirebilirsiniz.

— Michael Mior

@Michael - Evet, sadece .mycalss diyebiliriz ama onun bir div olduğunu bilirsek, div.myclass aramayı daha hızlı yapar.

— ShankarSangoli

@Shankar, büyük olasılıkla daha hızlı, daha yavaş yapmaz. jquery'nin yerel değil cızırtı kullandığını varsayarsak document.queryselectorall, muhtemelen aynı şekilde arama yapar ve sizin durumunuzda ekstra bir kontrol gerçekleştirir . Yerel uygulamaların da aynısını yapması mümkündür.

— davin

Çalıştığım bazı hızlı testler bunun tarayıcıya bağlı olduğunu gösteriyor. Chrome'da marjinal olarak daha hızlı ve FF'de marjinal olarak daha yavaş göründü. Her iki durumda da, bu seçiciyi defalarca veya çok sayıda öğe üzerinde çalıştırmazsanız, fark muhtemelen ihmal edilebilir. Ham (ve muhtemelen kusurlu) testim için buraya bakın .

— Michael Mior

@Michael - Tagname'i sınıf adıyla birlikte belirtirsek, önce getElementsByTagName'i kullanır ve sonra kesinlikle daha hızlı olan ve hala ilk düzey sıralama yapmak için yerel yöntemi kullanan sınıf adını arar. Yine de seçilecek çok fazla eleman yoksa ihmal edilebilir.

— ShankarSangoli

11

Bir css seçici uyguladığınız gibi yaparsınız. İnstanse için yapabilirsin

$("#mydiv > .myclass")

veya

$("#mydiv .myclass")

Sonuncusu myclass içindeki myclass dahil myDiv içindeki her myclass ile eşleşir.

— Leandro Galluppi
kaynak

6

Sınıf özniteliği "sınıfım" olan her öğeyi seçmek istiyorsanız şunu kullanın:

$('#mydiv .myclass');

Yalnızca "myclass" sınıf özniteliğine sahip div öğelerini seçmek istiyorsanız şunu kullanın:

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

jquery seçicileri hakkında daha fazla bilgi bu makalelere bakın

— e11438
kaynak

1

bunun yerine deneyin $(".video-divs.focused"). Odaklanılan video-div'leri arıyorsanız bu işe yarar.

— user3749775
kaynak