Wie kann ich ein Element mit einer Klasse innerhalb eines DIV auswählen?

142

Ich habe folgendes HTML:

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

Ich möchte in der Lage sein, einen Selektor zu verwenden, der das Innere auswählt div, aber spezifisch für den mydivContainer ist. Wie kann ich dies mit jQuery erreichen?

— Idan Shechter
quelle

285

Versuchen:

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

JS Fiddle Demo .

Oder:

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

JS Fiddle Demo .

Oder:

$('#mydiv .myclass');

JS Fiddle Demo .

Verweise:

find().
Auswahlkontext .

Gut aus der find()Dokumentation zu lernen :

Die Methoden .find () und .children () sind ähnlich, mit der Ausnahme, dass letztere nur eine einzige Ebene im DOM-Baum durchlaufen.

— David sagt, Monica wieder einsetzen
quelle

2

Die zweiten beiden funktionieren nicht, aber find ist in Ordnung. Die zweiten beiden wählen jede Klasse = meine Klasse und jede ID = mydiv) aus, denke ich.

— Czupe

2

@czupe: Nein, während der Kontextauswahlansatz anders geschrieben ist, implementiert jQuery intern denselben $('#mydiv').find('.myclass');Ansatz wie im ersten Codefragment. Übrigens: '... jeden auswählen id=mydiv'? Es sollte immer nur eine Verwendung einer bestimmten idSeite geben (eine id muss innerhalb des Dokuments eindeutig sein ).

— David sagt, Monica am

@DavidThomas Nun, ich habe gerade $ ('# mydiv .myclass') ausprobiert. und das endete damit, dass alle Divs ausgewählt wurden, die die Klasse myclass haben, und nicht nur die Divs in mydiv.

— user3281466

@ user3281466: wirklich? Das scheint unwahrscheinlich, können Sie Ihr Problem reproduzieren ?

— David sagt, Monica

wie man bei div nach etwas

— sucht

20

Versuche dies

$("#mydiv div.myclass")

— ShankarSangoli
quelle

Oder wenn es Ihnen egal ist, ob es ein ist div(oder ob es immer ein sein wird div), können Sie zu $ ("# mydiv .myclass") vereinfachen.

— Michael Mior

@Michael - Ja, wir können nur .mycalss sagen, aber wenn wir wissen, dass es ein div ist, wird div.myclass die Suche beschleunigen.

— ShankarSangoli

@ Shankar, es wird es höchstwahrscheinlich nicht schneller machen, eher langsamer. Unter der Annahme, dass jquery sizzle verwendet und kein Muttersprachler ist document.queryselectorall, wird es wahrscheinlich auf die gleiche Weise suchen und in Ihrem Fall eine zusätzliche Überprüfung durchführen. Möglicherweise machen native Implementierungen dasselbe.

— David

Einige schnelle Tests, die ich durchgeführt habe, legen nahe, dass dies vom Browser abhängig ist. Es erschien in Chrome geringfügig schneller und in FF geringfügig langsamer. In beiden Fällen ist der Unterschied wahrscheinlich vernachlässigbar, es sei denn, Sie führen diesen Selektor mehrmals oder über eine große Anzahl von Elementen aus. Siehe hier für meinen rohen (und möglicherweise fehlerhaften) Test.

— Michael Mior

@Michael - Wenn wir den Tag-Namen zusammen mit dem Klassennamen angeben, wird zuerst getElementsByTagName verwendet und dann nach dem Klassennamen gesucht, der definitiv schneller ist und immer noch die native Methode verwendet, um die Sortierung der ersten Ebene durchzuführen. Trotzdem ist es vernachlässigbar, wenn nicht viele Elemente ausgewählt werden müssen.

— ShankarSangoli

11

Sie tun dies genauso, wie Sie einen CSS-Selektor anwenden würden. Zum Beispiel können Sie tun

$("#mydiv > .myclass")

oder

$("#mydiv .myclass")

Die letzte entspricht jeder myclass in myDiv, einschließlich myclass in myclass.

— Leandro Galluppi
quelle

6

Wenn Sie jedes Element mit dem Klassenattribut "myclass" auswählen möchten, verwenden Sie

$('#mydiv .myclass');

Wenn Sie nur div-Elemente mit dem Klassenattribut "myclass" auswählen möchten, verwenden Sie

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

Weitere Informationen zu jquery-Selektoren finden Sie in diesen Artikeln

— e11438
quelle

1

Versuchen Sie dies stattdessen $(".video-divs.focused"). Dies funktioniert, wenn Sie nach fokussierten Video-Divs suchen.

— user3749775
quelle