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

DOM包裹wrapInner()方法

如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

听起来有点绕，可以用个简单的例子描述下，简单的看一段代码：

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

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

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

最后的结构，匹配的di元素的内部元素被p给包裹了

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

.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

以上面案例为例，

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

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

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

注意：

 当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 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: 130px;
  13.     }
  14.  
  15.     .left div,
  16.     .right div {
  17.         width: 100px;
  18.         padding: 5px;
  19.         margin: 5px;
  20.         float: left;
  21.         border: 1px solid #ccc;
  22.         background: #bbffaa;
  23.     }
  24.  
  25.     .right div {
  26.         background: yellow;
  27.     }
  28.     p {
  29.         border: 1px solid red;
  30.     }
  31.  
  32.     a {
  33.         border: 1px solid blue;
  34.     }
  35.     </style>
  36. </head>
  37.  
  38.  
  39. <body>
  40.     <h2>DOM包裹wrapInner()方法</h2>
  41.     <div class="left">
  42.         <div class="aaron1">点击,通过wrapInner方法给所有div元素增加内部父容器p</div>
  43.         <div class="aaron2">点击,通过wrapInner的回调方法给每个div元素增加内部父容器a</div>
  44.     </div>
  45.     <div class="right">
  46.         <div class="right1">p元素</div>
  47.         <div class="right1">p元素</div>
  48.     </div>
  49.     <div class="left">
  50.         <div class="left1">a元素</div>
  51.         <div class="left1">a元素</div>
  52.     </div>
  53.  
  54.  
  55.     <script type="text/javascript">
  56.     $(".aaron1").on('click', function() {
  57.         //给所有class=right1的div元素，增加内部包裹父容器p
  58.        $('.right1').wrapInner('<p></p>');
  59.     })
  60.     </script>
  61.     <script type="text/javascript">
  62.     $(".aaron2").on('click', function() {
  63.         //wrapInner接受一个回调函数
  64.         //每一次遍历this都指向了合集中每一个class=left1的div元素
  65.         $('.left1').wrapInner(function() {
  66.             return '<a></a>'
  67.         })
  68.     })
  69.     </script>
  70. </body>
  71.  
  72. v</html>
  73.  
下一节