jQuery:添加、删除父元素

添加父元素
一、wrap()
作用：在每个匹配的元素外层包上一个html元素。
语法：
1、 .wrap( wrappingElement )

wrappingElement：可以是一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。
例：

<div class = 'box'></div>
<div id = 'wrap'></div>
<script>
//给class为box的div加上一个id为wrap的父级div
// html片段
$('.box').wrap('<div id = 'wrap''/>)
//选择表达式 将id为wrap的盒子复制一份，作为参数使用
$('.box').wrap($('#wrap'))
<script>
1
2
3
4
5
6
7
8
9
2、.wrap( function(index) )

function(index):回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函数内的 this 指向集合中的当前元素。
例：

//给class为box的div加上一个id为wrap的父级div
$('.box').wrap(function(index){
return '<div id = 'wrap''/>';
})
1
2
3
4
二、.wrapInner()
作用： 在匹配元素里的内容外包一层结构。

语法与.wrap()一致
.wrapInner()与.wrap()的区别：.wrap() 是给每个匹配到的元素外加上父元素，.wrapInner() 是给匹配到的所有元素的内容外加上一个父级元素，这个父级元素是在匹配到的元素内的。
例：

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>

<script>
//在inner元素的内容外加一个新的<div>元素
$('.inner').wrapInner('<div class="new" />');
</script>
1
2
3
4
5
6
7
8
9
结果为：

<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
1
2
3
4
5
6
7
8
三、.wrapAll()
作用： 在所有匹配元素外面包一层HTML结构。

语法：.wrapAll( wrappingElement )
wrappingElement：用来包在外面的HTML片段，选择表达式，jQuery对象或者DOM元素。

.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

例：

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<script>
//给所有class为inner的元素外加上一个class为new的div
$('.inner').wrapAll('<div class="new" />');
</script>
1
2
3
4
5
6
7
8
结构如下：

<div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>
1
2
3
4
5
6
删除父元素
.unwrap()
作用： 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

语法： .unwrap()

注意：这个方法不接受任何参数。

.unwrap()删除元素的父级元素。和 .wrap()的功能刚好相反。
————————————————
版权声明：本文为CSDN博主「鸣_c」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/C_755028787/article/details/106181524