javascript - jQuery ile bir sınıf seçici ve bir öznitelik seçiciyi birleştirmek

jQuery ile hem bir sınıf seçici ve bir öznitelik seçiciyi birleştirmek mümkün mü?

Örneğin, aşağıdaki HTML verildiğinde:

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

Sadece 1. ve 3. satırları seçmek için hangi seçici kullanılabilir?

Denedim:

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

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

Cevabın çok basit olduğundan eminim ve jQuery forumlarında ve dokümantasyonunda arama yapmayı denedim ama bunu bir türlü çözemedim. Biri yardımcı olabilir mi?

Cevap #1

Onları birleştirin. Kelimenin tam anlamıyla birleştirin; herhangi bir noktalama işareti kullanmadan birbirine ekleyin.

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

İlk seçiciniz, sınıfa sahip elementlerin içinde bulunan nitelik değerine sahip elementleri arar.
Boşluk, alt öğe seçici olarak yorumlanır.

İkinci seçiciniz, dediğiniz gibi, ya öznitelik değerine sahip öğeleri, ya sınıfa sahip öğeleri ya da her ikisini birden arar.
Virgül, çoklu seçici operatörü olarak yorumlanıyor — bunun ne anlama geldiği bilinmiyor (CSS seçicilerinde "operatör" kavramı yoktur; virgül muhtemelen daha doğru bir şekilde ayırıcı olarak bilinir).

Cevap #2

Bence sadece boşluğu kaldırmanız gerekiyor. Yani.

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

Burada bir fiddle var http://jsfiddle.net/xXEHY/

İlgili makaleler