jQuery / Method / .add() - 요소를 추가로 선택하는 메서드
.add()
.add()는 어떤 요소를 추가로 선택할 때 사용합니다.
문법
.add( selector )
예를 들어
$( 'ul' ).add( 'p' )
는 ul 요소를 선택하고, 추가로 p 요소를 선택합니다.
예제 1
li 요소를 선택하고, 추가로 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' ).add( 'p' ).css( 'color', 'red' ); } ); </script> </head> <body> <ul> <li>Lorem</li> <li>Ipsum</li> </ul> <p>Dolor</p> </body> </html>
예제 2
첫번째 li 요소(Lorem)에 마우스를 올리면, 첫번째 li 요소(Lorem)와 문단(Dolor)의 색을 빨간색으로 만듭니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> li { cursor: pointer; } </style> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'li.la' ).hover( function() { $( this ).add( 'p' ).css( 'color', 'red' ); }, function () { $( this ).add( 'p' ).css( 'color', 'black' ); } ); } ); </script> </head> <body> <ul> <li class="la">Lorem</li> <li class="lb">Ipsum</li> </ul> <p>Dolor</p> </body> </html>
참고
현재 선택한 요소와 함께 이전에 선택한 요소도 선택하려면 .addBack()를 사용합니다.