jQuery : 요소의 클래스와 ID를 동시에 선택합니까?

170

클래스와 ID를 동시에 선택하려는 링크가 있습니다.

두 가지 행동이 있기 때문입니다. 링크 클래스에 하나의 클래스 이름이 있으면 같은 방식으로 작동하고, 동일한 링크 클래스에 다른 클래스 이름이 있으면 다르게 작동합니다. 클래스 이름은 jquery로 전환됩니다.

따라서 링크 클래스와 id를 동시에 선택할 수 있어야합니다. 이게 가능해?

난 노력 했어:

 $("a .save #country")

결과가 없습니다.

— 아지
소스

305

넌 할 수있어:

$("#country.save")...

또는

$("a#country.save")...

또는

$("a.save#country")...

당신이 원하는대로.

따라서 예, ID 및 클래스 (및 잠재적으로 태그 이름 및 던질 다른 항목)와 일치 해야하는 선택기를 지정할 수 있습니다 .

— 클레 투스
소스

41

따라서 기본적으로 다음과 같습니다. $ ( "# a .b")는 id가 a 인 요소 안에 클래스 b가있는 요소를 의미합니다. $ ( "# ab")는 클래스 b와 id a를 가진 요소를 의미합니다. 트릭은 #A와 .B 사이의 공간입니다

— Bhumi Singhal이

13

수업 전에 id 선택기를 사용하면주의해야합니다. 그렇지 않으면 작동하지 않습니다. 예 : $ ( ". save # country") ...는 결과를 반환하지 않습니다.

— slotomo

43

Alex가 제공 한 답변이 저에게 효과적이며 답변으로 강조 표시 된 답변이 아니라고 덧붙입니다.

이것은 나를 위해 작동하지 않았다

$('#country.save')

그러나 이것은했다 :

$('#country .save')

그래서 내 결론은 공간을 사용하는 것입니다. 이제는 사용중인 jQuery의 새 버전 (1.5.1)인지 알 수 없지만 어쨌든 이것이 비슷한 문제가있는 사람에게 도움이되기를 바랍니다.

편집 : 설명에 대한 전체 크레딧 (Alex의 답변에 대한 의견)은 Felix Kling에게 다음과 같이 말합니다.

공백은 자손 선택기입니다. 즉, AB는 "A와 일치하는 요소의 자손 인 B와 일치하는 모든 요소와 일치"를 의미합니다. AB는 "A와 B와 일치하는 모든 요소를 선택하십시오"를 의미합니다. 따라서 실제로 달성하고자하는 것에 달려 있습니다. #country.save그리고 #country .save해당되지 않습니다.

— 니콜라
소스

2

"국가"대신 "국가"라고 말한 문제입니까?

— amindfv

8

ID와 클래스 식별자 사이에 공백을 추가 할 때 작동합니다.

$("#countery .save")...

— 알렉스
소스

1

$ ( '# countery.save')처럼 작동하지 않았기 때문에 실제로 이것은 나를 위해 일했습니다. 감사합니다!

— Nikola

1

나는 때때로 공간에 대해 까다로운 것을 발견했습니다. $ (. selector> .item # id)와 같이 작동하지만 $ (. selector> .item #id)는 작동하지 않습니다.

— Abe Petrillo

21

공백은 자손 선택기입니다 . 즉 A B"A와 일치하는 요소의 자손 인 B와 일치하는 모든 요소 일치"를 의미합니다. AB"A 및 B와 일치하는 모든 요소 선택"을 의미합니다. 따라서 실제로 달성하고자하는 것에 달려 있습니다. #countery.save그리고 #countery .save해당되지 않습니다.

— Felix Kling

2

결국 CSS와 동일한 규칙이 적용됩니다.

그래서 나는 이 참고 문헌 이 귀중한 용도로 사용될 수 있다고 생각 합니다.

— Getack
소스

참조 내용을 요약 해 주시겠습니까?

— krlmlr

실제로 api.jquery.com/category/selectors 에 따르면 jQuery에는 자체 선택기가 있습니다. 또한 실제로 모든 CSS 1-3 선택기가 지원된다고 말하지는 않습니다.

— SamB

@SamB 당신 말이 맞지만 CSS 1-3에서 빌려오고 자신을 추가 한다고합니다 . 여전히 W3C에 대한 링크가이 토론에 유효하다고 생각합니다.

— akousmata

2

이 코드는 어떻습니까?

$("a.save#country")

— 페카
소스

1

$("a.save, #country")

"a.save"클래스와 "country"id를 모두 선택합니다.

— 알았어
소스