본문 바로가기

TroubleShooting

[jQuery] 키 값으로 하위 엘레먼트의 value값을 사용하는 엘레먼트 선택하기

* 자바스크립트 라이브러리로 jQuery 를 사용하고 있음을 가정한다.


Q : (상황 설명)

웹 페이지 구성상 컨텐츠를 담고있는 Block 엘레먼트들의 ID가 중복이 될 수 있는 상황이다.

그렇기에 Block 엘레먼트의 ID 속성은 없애고 그 대신에 자식 엘레먼트의 value값을 조합하여 이를 키값으로 사용하고자 한다.


다음과 같은 형태로 구성이 되었을 때 3번째 content_block을 선택하려면 어찌해야 하는가?

  
contents.....
contents.....
contents.....
contents.....
A :
jQuery Selector인 .has()Next Adjacent Selector (“prev + next”) 를 이용하여 선택이 가능하다.

코드는 다음과 같다.

$(".content_block").has(".id[value='3'] + .type[value='img'] + .set[value='7']").css("background-color","pink");



- 결과 -