包裹与解包元素
- wrap() 方法
- unwrap() 方法
- wrapAll() 方法
- wrapInner() 方法
wrap()案例
html
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
js
$(function(){
$("button").click(function(){
$("p").wrap("<div>");
})
})
单击按钮执行后的结果
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<div><p>itemp1</p></div>
<div><p>itemp2</p></div>
<div><p>itemp3</p></div>
<div><p>itemp4</p></div>
<div><p>itemp5</p></div>
每个p元素外面都后包裹一个 div
wrapAll()案例
html
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
js
$(function(){
$("button").click(function(){
$("p").wrapAll("<div>")
})
})
单击按钮执行后的结果
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
</div>
所有的p元素都会包裹在一个div里面
wrapInner()案例
html
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>
js
$(function(){
$("button").click(function(){
$("p").wrapInner("<a href=''>")
})
})
单击按钮执行后的结果
<button>按钮</button>
<div class="b">
<h2>this 我是h2</h2>
</div>
<div>
<p><a href=''>itemp1</a></p>
<p><a href=''>itemp2</a></p>
<p><a href=''>itemp3</a></p>
<p><a href=''>itemp4</a></p>
<p><a href=''>itemp5</a></p>
</div>
每个 p 里面都包裹了一个a元素
unwrap()案例
html
<button>按钮</button>
<p><a href="">小<span><i>我是一个小i</i></span></a></p>
js
$(function(){
$("button").click(function(){
$("i").unwrap()
})
})
单击按钮执行后的结果
<button>按钮</button>
<p><a href="">小<i>我是一个小i</i></a></p>
每单击一次按钮 i都少一层父亲元素
