jQuery 강좌 | 자식 요소의 개수에 따라 부모 요소 선택하기

Category

CSS 코딩을 할 때 어려운 것 중의 하나는 원하는 요소를 콕 찝어서 선택하는 겁니다. class나 id가 잘 주어져 있으면 쉬운데, HTML 태그만 있거나, 하나의 class 값이 여러 곳에 사용되고 있으면 선택이 어려워집니다.

CSS3에서 선택자가 많아지기는 했지만, CSS에는 비교 연산 기능이 거의 없어서 스크립트의 힘을 빌려야 할 때가 종종 생깁니다.

최근에 작업하면서 발생한 문제는 자식 요소의 개수를 기준으로 부모 요소를 선택하는 거였습니다. CSS 선택자로는 불가능해서 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라는 클래스을 추가합니다.

Created on 2017-10-27 09:45 | Updated on 2017-10-27 09:45

이 글을 공유하기

Kakao