-
jQuery - .wrapAll()jQuery 2020. 6. 23. 19:55
.wrapAll()
- 선택한 요소 모두를 새로운 태그로 감싼다.
문법
.wrapAll( wrappingElement )예를 들어
$( 'p' ).wrap( '<div></div>' );예제1
- .wrap() 선택한 요소에 각각 적용된다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { color: red; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { $( 'p' ).wrap( '<div></div>' ); } ); </script> </head> <body> <p>Lorem ipsum dolor.</p> <h1>Lorem ipsum dolor.</h1> <p>Lorem ipsum dolor.</p> </body> </html>즉, 다음처럼 만든다.
<div> <p>Lorem ipsum dolor.</p> </div> <h3>Lorem ipsum dolor.</h3> <div> <p>Lorem ipsum dolor.</p> </div>반면 .wrapAll()은 선택한 요소를 모아서 하나의 태그로 둘러싼다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { color: red; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { $( 'p' ).wrapAll( '<div></div>' ); } ); </script> </head> <body> <p>Lorem ipsum dolor.</p> <h3>Lorem ipsum dolor.</h3> <p>Lorem ipsum dolor.</p> </body> </html>즉, 다음처럼 만든다.
<div> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum dolor.</p> </div> <h3>Lorem ipsum dolor.</h3>예제2
- .wrapAll()은 하위 요소 모두를 새로운 태그로 감쌀 때 유용하게 사용할 수 있다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .red { color: red; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> $( document ).ready( function() { $( '.wa' ).contents().wrapAll( '<div class="red"></div>' ); } ); </script> </head> <body> <div class="wa"> <h1>Lorem ipsum dolor.</h1> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum dolor.</p> </div> </body> </html>즉, 다음 처럼 만든다.
<div class="wa"> <div class="red"> <h3>Lorem ipsum dolor.</h3> <p>Lorem ipsum dolor.</p> <p>Lorem ipsum dolor.</p> </div> </div>'jQuery' 카테고리의 다른 글
jQuery - .val() (0) 2020.06.23 jQuery - .unwrap() (0) 2020.06.23 jQuery - .width() (0) 2020.06.23 jQuery - .toggleClass() (0) 2020.06.23 jQuery - .toggle() (0) 2020.06.23