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?

javascript jquery html class jquery-selectors Idan Shechter
źródło

Odpowiedzi:

285

Próbować:

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

Demo JS Fiddle .

Lub:

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

Demo JS Fiddle .

Lub:

$('#mydiv .myclass');

Demo JS Fiddle .

Bibliografia:

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