jQuery

jQuery - .wrapAll()

행복하게사는게꿈 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>
저작자표시 (새창열림)