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?

Jason Kind
quelle

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).

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

Ich denke, Sie müssen nur den Platz entfernen. dh

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

Hier gibt es eine Geige http://jsfiddle.net/xXEHY/

Nick Pyett
quelle
7

Dieser Code funktioniert auch:

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

Dies wird auch funktionieren:

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