클래스 선택기 및 속성 선택기를 jQuery와 결합

클래스 선택기 및 속성 선택기를 jQuery와 결합

클래스 셀렉터와 속성 셀렉터를 jQuery와 결합할 수 있습니까?

예를 들어, 다음과 같은 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>

1행과 3행만 선택할 수 있는 선택기는 무엇입니까?

시도해 본 결과:

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

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

저는 답이 매우 간단하다고 확신하며 jQuery 포럼과 문서를 검색해 보았지만 이것을 이해할 수 없는 것 같습니다.누가 도와줄 수 있습니까?

그것들을 합쳐라.문자 그대로 결합합니다. 구두점 없이 결합합니다.

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

첫 번째 선택기는 클래스가 있는 요소에 포함된 속성 값을 가진 요소를 찾습니다.
공간을 하위 선택기로 해석하고 있습니다.

두 번째 선택기는 말씀하신 대로 속성 값이나 클래스 또는 둘 다를 가진 요소를 찾습니다.
쉼표는 다중 선택기 연산자로 해석됩니다. 이것이 의미하는 바는 무엇이든 간에 말입니다(CSS 선택기에는 "연산자"라는 개념이 없습니다. 쉼표는 아마도 구분 기호로 더 정확하게 알려져 있을 것입니다.

공간만 없애면 될 것 같아요.

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

여기 http://jsfiddle.net/xXEHY/ 에 바이올린이 있습니다.

이 코드도 작동합니다.

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

이 기능은 다음과 같이 작동합니다.

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

언급URL : https://stackoverflow.com/questions/6246683/combining-a-class-selector-and-an-attribute-selector-with-jquery