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结构包裹起来

站长苏飞

我只是路过打酱油的。

范范

谢老大支持，努力ing

Amy

这个不错 学习中 赞一个 强烈支持楼主ing……