jQuery中的内容包装与元素删除函数

wrap / unwrap / wrapAll / wrapInner

remove / detach

测试文件见前篇文章中的测试页面代码。点击此处可直接进入

wrap

在元素(标签)外包装一个或多个元素(标签),函数参数接受元素集合,也接受返回标签的回调函数作为参数。如通过在所在标签<span></span> 标签外包装<strong></strong>标签、给所有的段落包装<strong></strong>标签,使得文字变粗,或者给所选元素集合包装一个<div>

在使用的时候注意标签的嵌套是否合法,如给所有的段落外增加<strong></strong>就属于嵌套不合法。

$("span").wrap("");
//$("span").wrap(""); $("span").wrap(""); //像上面这样写也可以 //类为foo的span包装标签,其他span标签包装标签 $("span").wrap(function() { return $(this).is(".foo") ? "" : ""; }); 

unwrap

删除包住所选元素的元素,不接受参数,如要删除包住<span>元素的元素。

$("span").unwrap();

wrapAll

wrapAll将所选的元素集合都用一个元素包装,如将所有的段落用一个<div>包住,需要注意的是wrapAll是会移动元素的,在<span>元素集合上使用wrapAll,使用<strong>包住该元素集合。

var div = $("&lt;div>", { "css" : {"background" : "yellow"} }); $("p").wrapAll(div); //注意元素的移动 $("span").wrapAll("");&lt;/div>

wrapInner

包裹元素内容,可以用标签包住元素内的所有内容,如将所有的段落文字变成粗体。

$("p").wrapInner("");

remove & detach

remove和detach用于删除DOM中的元素,其区别是remove直接删除选中的元素,detach除了删除选中的元素外,还保存了删除元素的数据。