wrap wrapInner wrapAll unWarp

来源：互联网发布：抓老鼠知乎编辑：程序博客网时间：2024/06/02 07:31

.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>

0 0