Kombinieren eines Klassenselektors und eines Attributselektors mit jQuery


147

Ist es möglich, sowohl einen Klassenselektor als auch einen Attributselektor mit jQuery zu kombinieren ?

Zum Beispiel mit folgendem HTML:

<TABLE>
  <TR class="myclass" reference="12345"><TD>Row 1</TD></TR>
  <TR class="otherclass" reference="12345"><TD>Row 2</TD></TR>
  <TR class="myclass" reference="12345"><TD>Row 3</TD></TR>
  <TR class="myclass" reference="54321"><TD>Row 4</TD></TR>
</TABLE>

Mit welchem ​​Selektor kann ich nur die Zeilen 1 und 3 auswählen?

Ich habe versucht:

$(".myclass [reference=12345]") // returns nothing

$(".myclass, [reference=12345]") // returns all 4 rows (yes, I know the comma means 'or')

Ich bin mir sicher, dass die Antwort sehr einfach ist und ich habe versucht, die jQuery-Foren und -Dokumentation zu durchsuchen, aber ich kann diese scheinbar nicht herausfinden. Kann jemand helfen?

Antworten:


290

Kombiniere sie. Kombinieren Sie sie buchstäblich ; Befestigen Sie sie ohne Interpunktion.

$('.myclass[reference="12345"]')

Ihr erster Selektor sucht nach Elementen mit dem Attributwert, die in Elementen mit der Klasse enthalten sind.
Das Leerzeichen wird als Nachkommen-Selektor interpretiert .

Ihr zweiter Selektor sucht, wie Sie sagten, nach Elementen mit entweder dem Attributwert oder der Klasse oder beiden.
Das Komma wird als Mehrfachselektoroperator interpretiert - was auch immer das bedeutet (CSS-Selektoren haben keine Vorstellung von "Operatoren"; das Komma wird wahrscheinlich genauer als Trennzeichen bezeichnet).


1
kann ich id auch kombinieren? Ich meine so: $ ('. myclass [myid = "6"]')
Rahul Pawar


7

Dieser Code funktioniert auch:

$("input[reference=12345].myclass").css('border', '#000 solid 1px');

1

Dies wird auch funktionieren:

$(".myclass[reference='12345']").css('border', '#000 solid 1px');
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.