jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자
:has()
:has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다.
문법
$( ':has(selector)' )
예를 들어
$( 'p:has(span)' )
은 span 요소를 가지고 있는 p 요소를 선택합니다.
예제
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'li:has( a )' ).css( 'border', '1px solid red' ); } ); </script> </head> <body> <h1>jQuery Selector - :has()</h1> <ul> <li>Lorem</li> <li><a href="#">Ipsum</a></li> <li>Dolor</li> <li>Sit</li> <li><a href="#">Amet</a></li> </ul> </body> </html>
하위 요소로 a 요소를 갖는 li 요소를 선택하여 빨간색 테두리를 만듭니다.