DOM包裹wrapInner()方法

来源：互联网发布：江南作品集软件下载编辑：程序博客网时间：2024/06/02 19:04

如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，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 标签应该是被正确关闭的。

<!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: 130px;    }        .left div,    .right div {        width: 100px;        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包裹wrapInner()方法</h2>    <div class="left">        <div class="aaron1">点击,通过wrapInner方法给所有div元素增加内部父容器p</div>        <div class="aaron2">点击,通过wrapInner的回调方法给每个div元素增加内部父容器a</div>    </div>    <div class="right">        <div class="right1">p元素</div>        <div class="right1">p元素</div>    </div>    <div class="left">        <div class="left1">a元素</div>        <div class="left1">a元素</div>    </div>    <script type="text/javascript">    $(".aaron1").on('click', function() {        //给所有class=right1的div元素，增加内部包裹父容器p       $('.right1').wrapInner('<p></p>');    })    </script>    <script type="text/javascript">    $(".aaron2").on('click', function() {        //wrapInner接受一个回调函数        //每一次遍历this都指向了合集中每一个class=left1的div元素        $('.left1').wrapInner(function() {            return '<a></a>'        })    })    </script></body>v</html>

0 0