jQuery 강좌 | 특정 요소를 하위 요소로 갖지 않는 요소 선택하는 방법

Category

특정 요소를 포함하는 요소 선택하는 방법

jQuery의 :has 선택자를 이용해서 특정 요소를 하위 요소로 갖고 있는 요소를 선택할 수 있습니다.

예를 들어

$( 'p:has( span )' ).css( 'color', 'red' );

는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다.

특정 요소를 포함하지 않는 요소 선택하는 방법

특정 요소를 하위 요소로 갖지 않는 요소를 선택할 때는 :not 선택자를 이용합니다.

예를 들어

$( 'p:not(:has( span ))' ).css( 'color', 'blue' );

는 span 요소를 자식 요소로 갖지 않는 p 요소의 색을 파란색으로 만듭니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      jQuery( document ).ready( function() {
        $( 'p:has( span )' ).css( 'color', 'red' );
        $( 'p:not(:has( span ))' ).css( 'color', 'blue' );
      } );
    </script>
  </head>
  <body>
    <p>Lorem <span>Ipsum</span> Dolor.</p>
    <p>Lorem Ipsum Dolor.</p>
  </body>
</html>

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