jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기
자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. li 요소를 3개 이상 가진 ol 요소를 선택해서 글자를 빨간색으로 만듭니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .a { color: red; } </style> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script> $( document ).ready( function() { $( 'ol' ).each( function() { if ( $( 'li', this ).length > 2 ) { $( this ).addClass( 'a' ); } } ); } ); </script> </head> <body> <ol> <li>One</li> <li>Two</li> </ol> <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </body> </html>
$( 'ol' ).each( function() {
each로 각각의 ol 요소에 대해 개별적으로 접근합니다.
if ( $( 'li', this ).length > 2 ) {
length 속성으로 li 요소의 개수를 세고 2보다 큰지 비교합니다.
$( this ).addClass( 'a' );
조건에 맞다면 a라는 클래스을 추가합니다.