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>

2、.wrap( function(index) )

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

//给class为box的div加上一个id为wrap的父级div
$('.box').wrap(function(index){
return '<div id = 'wrap''/>';
})

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

结果为：

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

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

结构如下：

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

删除父元素

.unwrap()

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

语法： .unwrap()

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

.unwrap()删除元素的父级元素。和 .wrap()的功能刚好相反。