Home
jQuery

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

다음은 jQuery를 이용한 간단한 예제입니다. li 요소를 3개 이상 가진 ol 요소를 선택해서 글자를 빨간색으로 만듭니다.

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

다음은 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라는 클래스을 추가합니다.

Post a Comment