DOM包裹unwrap()方法

来源：互联网发布：2016年淘宝销量排行榜编辑：程序博客网时间：2024/06/10 16:29

<!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包裹unwrap()方法</h2>    <div class="left">        <div class="aaron1">点击,通过unwrap方法给p元素删除父容器div</div>        <div class="aaron2">点击,通过unwrap的回调方法给a元素删除父容器div</div>    </div>    <div class="right">        <div>            <p>p元素</p>        </div>        <div>            <p>p元素</p>        </div>    </div>    <div class="left">        <div>            <a>a元素</a>        </div>        <div>            <a>a元素</a>        </div>    </div>    <script type="text/javascript">    $(".aaron1").on('click', function() {        //找到所有p元素，删除父容器div        $('p').unwrap('<div></div>')    })    </script>    <script type="text/javascript">    $(".aaron2").on('click', function() {        //找到所有p元素，删除父容器div        $('a').unwrap(function() {            return '<div></div>';        })    })    </script></body></html>

我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?

jQuery提供了一个unwarp()方法，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

看一段简单案例：

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

我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法

$('div').remove();

但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，jQuery提供了unwarp方法很方便的处理了这个问题

$('p').unwarp();

找到p元素，然后调用unwarp方法，这样只会删除父辈div元素了

结果：

<p>p元素</p>

这个方法比较简单，也不接受任何参数，注意参考下案例的使用即可

0 0