it-swarm.com.de

jquery, Selektor für die Klasse innerhalb der ID

Wie soll ich unten mit my_class die Elemente auswählen, die die Klasse id = "my_id" innerhalb des Elements enthalten? 

Beachten Sie, dass das Element auch eine andere Klasse haben kann, für die ich nicht auswähle.

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

hat versucht

$("#my_id [class*=my_class ]")
76
user984003

Sie können die Klassenauswahl zusammen mit Nachkommensauswahl verwenden.

$("#my_id .my_class")
129
Arun P Johny

Verwenden Sie einfach den einfachen Klassenauswahlschalter.

$('#my_id .my_class')

Es ist egal, ob das Element auch andere Klassen hat. Es hat die Klasse .my_class, und es befindet sich irgendwo in #my_id, sodass es mit diesem Selektor übereinstimmt.

In Bezug auf die Leistung

Gemäß der jQuery-Selektor-Leistungsdokumentation ist es schneller, die beiden Selektoren getrennt zu verwenden, wie folgt:

$('#my_id').find('.my_class')

Hier ist der relevante Teil der Dokumentation:

ID-basierte Selektoren

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

Der Ansatz von .find() ist schneller, da die erste Auswahl ohne Durchlaufen der Sizzle-Auswahl-Engine ausgeführt wird. ID-only-Auswahlmöglichkeiten werden mit document.getElementById() gehandhabt.

Durch Auswahl von nach ID oder nach Klasse allein (unter anderem) werden vom Browser bereitgestellte Funktionen wie document.getElementById() aufgerufen, die recht schnell sind, wohingegen die Verwendung eines absteigenden Selektors den Sizzle aufruft Motor wie erwähnt, der zwar schnell ist, aber langsamer ist als die vorgeschlagene Alternative.

40
doppelgreener

Verwenden Sie immer 

//Super Fast
$('#my_id').find('.my_class'); 

anstatt 

// Fast:
$('#my_id .my_class');

Siehe JQuery-Leistungsregeln .

Auch bei Jquery Doc

12
Niks Jain

Ich denke, Sie bitten, nur <span class = "my_class">hello</span> dieses Element auszuwählen. Sie haben dies getan. Wenn ich Ihre Frage richtig verstehe, ist dies die Antwort.

$("#my_id [class='my_class']").addClass('test');

DEMO

1

Auch $( "#container" ).find( "div.robotarm" );
ist gleich: $( "div.robotarm", "#container" )

0
Pasha Oleynik