DOM包裹wrapAll()方法

来源：互联网发布：网络摄像头ip搜索工具编辑：程序博客网时间：2024/05/07 00:29

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 结构进行包裹。

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>    <style>    .left,    .right {        width: 250px;        height: 120px;    }        .left div,    .right div {        width: 100px;        /*height: 120px;*/        padding: 5px;        margin: 5px;        float: left;        border: 1px solid #ccc;        background: #bbffaa;    }        .right div {        background: yellow;    }        p {        border: 1px solid red;    }        a {        border: 1px solid blue;    }    </style></head><body>    <h2>DOM包裹wrapAll()方法</h2>    <div class="left">        <div class="aaron1">点击,通过wrapAll方法给所有P元素增加父容器div</div>        <div class="aaron2">点击,通过wrapAll的回调方法给每个a元素增加父容器div</div>    </div>    <div class="right">        <p>p元素</p>        <p>p元素</p>    </div>    <div class="left">        <a>a元素</a>        <a>a元素</a>    </div>    <script type="text/javascript">    $(".aaron1").on('click', function() {        //给所有p元素，增加父容器div        $('p').wrapAll('<div></div>');    })    </script>    <script type="text/javascript">    $(".aaron2").on('click', function() {        //wrapAll接受一个回调函数        //每一次遍历this都指向了合集中每一个a元素        $('a').wrapAll(function() {            return '<div></div>'        })    })    </script></body></html>

0 0