wrap()

概述 .wrap( wrappingElement )

返回值：jQuery

描述： 在集合中匹配的每个元素周围包裹一个HTML结构。

V ： 1 .0.wrap( wrappingElement )
- wrappingElement
  
  类型: Selector 或 htmlString 或 Element 或 jQuery
  
  一个选择器，元素，HTML字符串，或jQuery对象指定的html结构环绕包裹的匹配元素。当你传递一个包含多个元素一个jQuery集合，或选择器的匹配多个元素时，第一元素将被使用。
V : 1.4.wrap( function )
- function
  
  类型: Function( Integer index ) => String 或 jQuery
  
  一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。接受的 index 参数表示匹配元素在集合中的索引位置。该函数内的 this 指向集合中的当前元素。

.wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。

参数可以是string或者对象只要能形成DOM结构，可以是嵌套的，但是结构只包含一个最里层元素。这个结构会包在每个匹配元素外层。该方法返回没被包裹过的元素的jQuery对象用来链接其他函数。

考虑下面的HTML：

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

使用.wrap(), 我们可以在inner <div>外层插入一个HTML结构。

$('.inner').wrap('<div class="new" />');

结果如下：

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

该方法的第二种用法允许我们用函数做参数，改函数返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素。例如：

$('.inner').wrap(function() {
  return '<div class="' + $(this).text() + '" />';
});

结果如下：

<div class="container">
  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
</div>

示例

实例

在所有段落外包一个div

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
<script>$("p").wrap("<div></div>");</script>
 
</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.

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>
<script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>
 
</body>
</html>

运行一下

实例

Wrap a new div around all of the paragraphs.

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
<script>$("p").wrap(document.createElement("div"));</script>
 
</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.

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div { border: 2px solid blue; margin:2px; padding:2px; }
  .doublediv { border-color:red; }
  p { background:yellow; margin:4px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>
<script>$("p").wrap($(".doublediv"));</script>
 
</body>
</html>

运行一下

wrap()

概述 .wrap( wrappingElement )

V ： 1 .0.wrap( wrappingElement )

V : 1.4.wrap( function )

实例

实例

实例

实例