Menggabungkan pemilih kelas dan pemilih atribut dengan jQuery


147

Apakah mungkin untuk menggabungkan pemilih kelas dan pemilih atribut dengan jQuery?

Misalnya, diberikan HTML berikut:

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

Apa yang akan menjadi pemilih yang dapat saya gunakan untuk memilih baris 1 dan 3 saja?

Saya telah mencoba:

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

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

Saya yakin jawabannya sangat sederhana dan saya telah mencoba mencari di forum dan dokumentasi jQuery tetapi saya tidak dapat menemukan jawabannya. Adakah yang bisa membantu?

Jawaban:


290

Gabungkan mereka. Secara harfiah menggabungkan mereka; lampirkan bersama-sama tanpa tanda baca.

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

Pemilih pertama Anda mencari elemen dengan nilai atribut, yang terkandung dalam elemen dengan kelas.
Ruang tersebut ditafsirkan sebagai pemilih keturunan .

Pemilih kedua Anda, seperti yang Anda katakan, mencari elemen dengan nilai atribut, atau kelas, atau keduanya.
Koma ditafsirkan sebagai operator pemilih ganda - apa pun artinya (pemilih CSS tidak memiliki gagasan "operator"; koma mungkin lebih tepat dikenal sebagai pembatas).


1
dapatkah saya menggabungkan id juga? maksud saya seperti ini: $ ('. myclass [myid = "6"]')
Rahul Pawar


7

Kode ini juga berfungsi:

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

1

Ini juga akan berfungsi:

$(".myclass[reference='12345']").css('border', '#000 solid 1px');
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.