.wrapAll()

.wrapAll( wrappingElement ) 返回:jQuery

Description: 在所有匹配元素外面包一层HTML结构。

  • version added: 1.2.wrapAll( wrappingElement )

    wrappingElement用来包在外面的HTML片段,选择表达式,jQuery对象或者DOM元素。

参数可以是string或者对象,只要能形成DOM结构,可以是嵌套的,但是结构只包含一个最里层元素。这个结构会将所有匹配元素作为一组包他们最外层。

例子:

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

如果我们对inner元素用.wrapAll():

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

结果如下:

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <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.min.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
<script>$("p").wrapAll("<div></div>");</script>

</body>
</html>

Demo:

例子:新建一个元素包住所有span。注意strong里德红色字没有被包住。

<!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.min.js"></script>
</head>
<body>
  <span>Span Text</span>
  <strong>What about me?</strong>
  <span>Another One</span>
<script>$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");</script>

</body>
</html>

Demo:

例子:在所有段落外包上新的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.min.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
<script>$("p").wrapAll(document.createElement("div"));</script>

</body>
</html>

Demo:

例子:将一个2层的div jQuery对象包在所有段落外面,注意该对象是被复制到目标外层,而不是移动。

<!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.min.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
  <div class="doublediv"><div></div></div>
<script>$("p").wrapAll($(".doublediv"));</script>

</body>
</html>

Demo:

设计酷,jquery1.6 api中文手册