[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");

- 결과 -