ドキュメント

Manipulation/wrapAll

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

wrapAll( html )

Wrap all the elements in the matched set into a single wrapper element.
This is different from .wrap() where each element in the matched set would get wrapped with an element.

This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document.

This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest descendant element within its structure -- it is that element that will enwrap everything else.
Arguments:
htmlString
A string of HTML that will be created on the fly and wrapped around the target.
Examples:

Wrap a new div around all of the paragraphs.

$("p").wrapAll("<div></div>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").wrapAll("<div></div>");
  });
  </script>
  <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html.

$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
  </style>
</head>
<body>
  <span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>
</body>
</html>

NameType

wrapAll( elem )

Wrap all the elements in the matched set into a single wrapper element.
This is different from .wrap() where each element in the matched set would get wrapped with an element.
Arguments:
elemElement
A DOM element that will be wrapped around the target.
Examples:

Wrap a new div around all of the paragraphs.

$("p").wrapAll(document.createElement("div"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").wrapAll(document.createElement("div"));
  });
  </script>
  <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.

$("p").wrapAll($(".doublediv"));

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").wrapAll($(".doublediv"));
  });
  </script>
  <style>
  div { border: 2px solid blue; margin:2px; padding:2px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:4px; font-size:14px; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>
</body>
</html>

NameType