Jak mogę wybrać przedmiot z klasą w DIV?

142

Mam następujący HTML:

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

Chcę móc używać selektora, który wybiera wnętrze div, ale jest specyficzny dla mydivkontenera. Jak mogę to osiągnąć dzięki jQuery?

— Idan Shechter
źródło

285

Próbować:

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

Demo JS Fiddle .

Lub:

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

Demo JS Fiddle .

Lub:

$('#mydiv .myclass');

Demo JS Fiddle .

Bibliografia:

find().
Kontekst selektora .

Dobrze się nauczyć z find()dokumentacji:

Metody .find () i .children () są podobne, z tą różnicą, że ta druga przemieszcza się tylko o jeden poziom w dół drzewa DOM.

— David mówi, że przywróć Monikę
źródło

2

drugie dwa nie będą działać, ale znajdź jest OK. Drugie dwa wybiorą każdą klasę = myclass i każdy id = mydiv), jak myślę.

— czupe

2

@czupe: nie, podczas gdy podejście z selektorem kontekstu jest napisane inaczej jQuery implementuje wewnętrznie to samo $('#mydiv').find('.myclass');podejście, które zostało użyte w pierwszym fragmencie kodu. Nawiasem mówiąc: „... wybierz wszystko id=mydiv”? Podane na stronie powinno być użyte tylko razid (znak id musi być unikalny w obrębie dokumentu ).

— David mówi, że przywróć Monikę

@DavidThomas Cóż, właśnie próbowałem $ ('# mydiv .myclass'); a to zakończyło się wybraniem wszystkich elementów div, które mają klasę mydiv, a nie tylko elementów div w mydiv.

— user3281466,

@ user3281466: naprawdę? Wydaje się to mało prawdopodobne, czy możesz odtworzyć swój problem ?

— David mówi, że przywróć Monice

jak sprawdzić, czy coś jest w div, a następnie wstawić: not ()

— SuperUberDuper

20

Spróbuj tego

$("#mydiv div.myclass")

— ShankarSangoli
źródło

Lub jeśli nie obchodzi cię, czy to jest div(czy zawsze będzie a div), możesz uprościć do $ ("# mydiv .myclass").

— Michael Mior

@Michael - Tak, możemy po prostu powiedzieć .mycalss, ale jeśli wiemy, że jest to element div, div.myclass przyspieszy wyszukiwanie.

— ShankarSangoli

@Shankar, najprawdopodobniej nie przyspieszy, a raczej zwolni. zakładając, że jquery używa sizzle, a nie natywnego document.queryselectorall, prawdopodobnie będzie szukał w ten sam sposób iw twoim przypadku przeprowadzi dodatkowe sprawdzenie. Możliwe, że natywne implementacje robią to samo.

— davin

Niektóre szybkie testy, które przeprowadziłem, sugerują, że jest to zależne od przeglądarki. Wydawał się nieznacznie szybszy w Chrome i nieznacznie wolniejszy w FF. Tak czy inaczej, chyba że uruchamiasz ten selektor wiele razy lub na dużej liczbie elementów, różnica jest prawdopodobnie nieistotna. Zobacz tutaj mój surowy (i prawdopodobnie błędny) test.

— Michael Mior,

@Michael - Jeśli określimy zmienną wraz z nazwą klasy, to najpierw użyjemy getElementsByTagName, a następnie wyszukamy nazwę klasy, która jest zdecydowanie szybsza i nadal używa natywnej metody do sortowania pierwszego poziomu. Zawsze jest to pomijalne, jeśli nie ma wielu elementów do wyboru.

— ShankarSangoli

11

Zrobisz to w ten sam sposób, w jaki zastosowałbyś selektor CSS. Na przykład możesz to zrobić

$("#mydiv > .myclass")

lub

$("#mydiv .myclass")

Ostatni będzie pasował do każdej myklasy w myDiv, w tym do myklasy w myklasie.

— Leandro Galluppi
źródło

6

Jeśli chcesz wybrać każdy element, który ma atrybut klasy „myclass”, użyj

$('#mydiv .myclass');

Jeśli chcesz wybrać tylko elementy div, które mają atrybut klasy „myclass”, użyj

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

więcej informacji o selektorach jquery zapoznaj się z tymi artykułami

— e11438
źródło

1

spróbuj tego zamiast tego $(".video-divs.focused"). Działa to, jeśli szukasz elementów div wideo, które są skoncentrowane.

— user3749775
źródło