苏飞论坛

标题: jQuery文档处理中包裹部分内容解析大全 [打印本页]

作者: 范范    时间: 2018-3-27 22:11
标题: jQuery文档处理中包裹部分内容解析大全
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结构包裹起来



作者: 站长苏飞    时间: 2018-3-29 16:02
我只是路过打酱油的。
作者: 范范    时间: 2018-4-3 22:23
谢老大支持,努力ing
作者: Amy    时间: 2018-11-21 18:08
这个不错 学习中 赞一个 强烈支持楼主ing……




欢迎光临 苏飞论坛 (http://www.sufeinet.com/) Powered by Discuz! X3.4