wrap wrapInner wrapAll unWarp

最新推荐文章于 2020-11-28 14:37:10 发布

转载最新推荐文章于 2020-11-28 14:37:10 发布 · 301 阅读

本文介绍如何使用jQuery的.wrap(), .wrapAll(), .wrapInner()和.unwrap()方法来为DOM元素添加或移除包装元素，通过示例展示了如何灵活运用这些方法实现不同的网页布局需求。

.warp(wrappingElement)

wrappingElement

在每个匹配的元素外层包上一个html元素。

wrappingElement 类型：String、Selector、Element、jQuery 用来包在匹配元素的外层

<script>
    $(document).ready(function () {
        $('.inner').wrap('<div class="new" />');
    })
</script>

.wrap(function(index))

function(index) 类型：function 返回用来包裹匹配元素的HTML内容或jQuery对象。

<script>
    $(document).ready(function () {
        $('.inner').wrap(function () {
            return '<div class="'+$(this).text()+'"/>';
        });
    })
</script>

Example 所有段落包含外包一个div

<script>
    $(document).ready(function () {
        $('p').wrap('<div />')
    })
</script>

<script>
    $(document).ready(function () {
        $('p').wrap('<div><div><p><em><b></b></em></p></div></div>')
    })
</script>

.warpAll(wrappingElement)

所有匹配元素外层包一层HTML结构

类型：String、Selector、Element、jQuery

所有匹配元素会被当作一个整体，在这个整体的外部用指定的HTML结构进行包裹。

<script>
    $(document).ready(function () {
        $('.inner').wrapAll('<div />')
    })
</script>

Example

嵌套两层div

<div class="container">
    <span class="inner">hello</span>
    <div>sunday</div>
    <span class="inner">google</span>
    <div class="doubleBorder"><div></div></div>
</div>

<script src="jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        $('span').wrapAll($('.doubleBorder'));
    })
</script>

.wrapInner(wrappingElement)

在匹配元素里的内容外包一层结构

.wrapInner(wrappingElement)

类型：string

.wrapInner(function(index))

<script>
    $(document).ready(function () {
        $('span').wrapInner('<div />')
    })
</script>

允许用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或HTML片段用来包裹匹配的内容

<script>
    $(document).ready(function () {
        $('span').wrapInner(function () {
            return '<div class="'+$(this).text()+'"/>';
        })
    })
</script>

注：下面一些正确写法

$(elem).wrapInner("<div class='test' />");

$(elem).wrapInner("<div class='test'></div>")

$(elem).wrapInner("<div class=\"test" ></div>")

.unWarp()

将匹配元素的父级元素删除，保留自身（兄弟元素，如果存在）在原来的位置。

不接受任何参数

<script>
    $(document).ready(function () {
        $('span').unwrap();
    })
</script>