자식 요소의 개수를 기준으로 부모 요소 선택하는 방법

자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다.

다음은 jQuery를 이용한 간단한 예제입니다.

<li> 요소를 3개 이상 가진 <ol> 요소를 선택해서 글자를 빨간색으로 만듭니다.

<ol>
  <li>One</li>
  <li>Two</li>
</ol>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

.a {
  color: red;
}

$( document ).ready( function() {
  $( 'ol' ).each( function() {
    if ( $( 'li', this ).length > 2 ) {
      $( this ).addClass( 'a' );
    }
  });
});

 

$( 'ol' ).each( function() {

each로 각각의 <ol> 요소에 대해 개별적으로 접근합니다.

 

if ( $( 'li', this ).length > 2 ) {

length 속성으로 <li> 요소의 개수를 세고 2보다 큰지 비교합니다.

 

$( this ).addClass( 'a' );

조건에 맞다면 a라는 클래스을 추가합니다.