jQuery文档处理中包裹部分内容解析大全
包裹,根据字面意思就可以看出,是用一个元素,将其他元素包起来,作为这个元素的子元素处理。
本节主要讲解jQuery文档处理中,包裹的所有方法以及方法的使用方式。
jQuery文档处理中包裹主要有如下几种
[C#] 纯文本查看 复制代码 1. wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。
2. unwrap() 把所有匹配的元素移出元素的父元素。
3. wrapAll(html|ele) 将所有匹配的元素用单个元素包裹起来。
4. wrapInner(html|ele|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
1. wrap(html|ele|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来。
使用方法如下: $(a).wrap('html') 将所有匹配的a元素,用html包裹起来,即作为html的子元素
实例
jQuery代码:
[JavaScript] 纯文本查看 复制代码 $('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
输出结果:
[HTML] 纯文本查看 复制代码 <div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
附件html:
[HTML] 纯文本查看 复制代码 <div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
备注:
从上例可以看出,实现了如下内容:
用原先div的内容作为新div的class,并将每一个元素包裹起来
即: 将所有的获取到的样式为inner的div作为子元素,在其外面包裹以该元素text为样式的div
从上例中可以看出, warp()方法,是将匹配到的元素,用括号内的内容给包裹起来
2. unwrap()
把所有匹配的元素移出元素的父元素。
实例
jQuery代码:
[JavaScript] 纯文本查看 复制代码 $("p").unwrap()
输出结果:
[HTML] 纯文本查看 复制代码 <p>Hello</p>
<p>cruel</p>
<p>World</p>
附件HTML代码:
[HTML] 纯文本查看 复制代码 <div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
备注:
从上例中看出,unwrap() 是将获取到的元素,从其父元素中移出来。
3. wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来。
实例
jQuery代码:
[JavaScript] 纯文本查看 复制代码 $("p").wrapAll("<div></div>")
输出结果:
[HTML] 纯文本查看 复制代码 <div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
<div>ceshi</div>
附件html:
[HTML] 纯文本查看 复制代码 <p>Hello</p>
<p>cruel</p>
<div>ceshi</div>
<p>World</p>
备注
wrapAll() 是将所有获取到的匹配的元素,使用一个元素将其包裹起来,作为该元素的子元素
从上例中可以看出, 在使用此方法时,会将页面的排序打乱,将原有的同级的html内容'<div>ceshi</div>' 从同级变成了p元素的上一级元素
4. wrapInner(html|ele|fn)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
实例
用原先div的内容作为新div的class,并将每一个元素包裹起来
jQuery代码:
[JavaScript] 纯文本查看 复制代码 $('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
})
输出结果:
[HTML] 纯文本查看 复制代码 <div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
附件html:
[HTML] 纯文本查看 复制代码 <div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
备注
从以上详解中可以看出:
1. wrap() 将匹配到A1、A2、A3元素,用一个B元素将其一个一个的包裹起来
2. unwrap() 将匹配到的A元素,从其父元素中移出来
3. wrapAll() 将匹配到A1、A2、A3元素,用一个B元素将A1、A2、A3做为B元素的子元素(且A1、A2、A3同为B元素的兄弟子元素)给包裹起来
4. wrapInner() 将匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
|