jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

.wrapAll()

.wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다.

문법

.wrapAll( wrappingElement )

예를 들어

$( 'p' ).wrap( '<div></div>' );

는 모든 p 요소를 모아서 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 / Method / .hover()

jQuery / Method / .hover()

.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery.trim() jQuery.trim()은 문자열에 있는 공백(whitespace)을 제거합니다. 주의할 점은 문자열 앞과 뒤에 있는 공백은 제거하지만, 문자열 중간에 있는 공백은 제거하지 않는다는 것입니다. 문법 jQuery.trim( str ) 예제 같은 문자열에 대하여, 두 번째 줄은 jQuery.trim()을 적용하였습니다. <!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> ...

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / jQuery.inArray()

jQuery / Method / jQuery.inArray()

jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...

jQuery / Method / .submit() - 폼 전송 이벤트

jQuery / Method / .submit() - 폼 전송 이벤트

.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다. select 선택 시 바로 폼 전송 select에서 값을 선택하면 바로 전송을 한다. 동적(다단계) 셀렉트 박스 만들 때 유용하다. <!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> ...

jQuery / Method / .add() - 요소를 추가로 선택하는 메서드

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> ...

jQuery / 요소가 순서대로 나타나게 하는 방법

jQuery / 요소가 순서대로 나타나게 하는 방법

.animate()로 요소를 나타내기 다음과 같이 간단한 예제를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { box-sizing: border-box; margin: 0px; } .jb { height: 200px; padding: 20px; text-align: center; color: ...

jQuery / meta 태그의 값 가져오기

jQuery / meta 태그의 값 가져오기

jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

.replaceWith() .replaceWith()는 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p ...

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드

.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...