클래스 선택기와 속성 선택기를 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