5-5 DOM包裹wrapAll()方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

DOM包裹wrapAll()方法

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

简单的看一段代码：

<p>p元素</p>
<p>p元素</p>

给所有p元素增加一个div包裹

$('p').wrapAll('<div></div>')

最后的结构，2个P元素都增加了一个父div的结构

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

通过回调的方式可以单独处理每一个元素

以上面案例为例，

$('p').wrapAll(function() {
    return '<div><div/>'; 
})

以上的写法的结果如下，等同于warp的处理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注意：

.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  8.     <style>
  9.     .left,
  10.     .right {
  11.         width: 250px;
  12.         height: 120px;
  13.     }
  14.  
  15.     .left div,
  16.     .right div {
  17.         width: 100px;
  18.         /*height: 120px;*/
  19.         padding: 5px;
  20.         margin: 5px;
  21.         float: left;
  22.         border: 1px solid #ccc;
  23.         background: #bbffaa;
  24.     }
  25.  
  26.     .right div {
  27.         background: yellow;
  28.     }
  29.  
  30.     p {
  31.         border: 1px solid red;
  32.     }
  33.  
  34.     a {
  35.         border: 1px solid blue;
  36.     }
  37.     </style>
  38. </head>
  39.  
  40. <body>
  41.     <h2>DOM包裹wrapAll()方法</h2>
  42.     <div class="left">
  43.         <div class="aaron1">点击,通过wrapAll方法给所有P元素增加父容器div</div>
  44.         <div class="aaron2">点击,通过wrapAll的回调方法给每个a元素增加父容器div</div>
  45.     </div>
  46.     <div class="right">
  47.         <p>p元素</p>
  48.         <p>p元素</p>
  49.     </div>
  50.     <div class="left">
  51.         <a>a元素</a>
  52.         <a>a元素</a>
  53.     </div>
  54.     <script type="text/javascript">
  55.     $(".aaron1").on('click', function() {
  56.         //给所有p元素，增加父容器div
  57.         $('p').wrapAll('<div></div>');
  58.     })
  59.     </script>
  60.     <script type="text/javascript">
  61.     $(".aaron2").on('click', function() {
  62.         //wrapAll接受一个回调函数
  63.         //每一次遍历this都指向了合集中每一个a元素
  64.         $('a').wrapAll(function() {
  65.             return '<div></div>'
  66.         })
  67.     })
  68.     </script>
  69. </body>
  70.  
  71. </html>
  72.  
下一节