关于jquery的包裹节点的简单理解 wrap() wrapAll() wrapInner()

jquery中有三种包裹节点的方法：

分别是wrap() wrapAll() wrapInner()

首先看看三种方法的定义：

wrap()：将每一个匹配的元素进行包裹（一对一的单独包裹）。

wrapInner():将每一个匹配的元素的 子内容用其他结构化的标记包裹起来。

wrapAll():将所有匹配的元素用一个元素包裹。

其中比较好理解的就是wrap()和wrapInner().

举两个简单的例子：

body中存在1个<em>hello world！</em>

此时分别执行$('em').wrap('<b></b>');

$('em').wrapInner('<b></b>');

得到的结果是<b><em>hello world！</em></b>

<em><b>hello world！</b></em>

wrap()是再选定元素外面包裹你设置的元素，而wrapInner()是在选定元素内部（元素的内容）包裹你设置的元素。

打一个不是很恰当的比喻：wrap(‘e’) ; e指的是你设置的元素，该元素做爸爸，而wrapInner('e')，e做儿子。

最后说一说 wrapAll(); 该方法是指将所有匹配元素用一个元素包裹。

1、如果此时选定元素是这种形式：

<em>hello world！</em>

<em>hello world！</em>

<em>hello world！</em>

<em>hello world！</em>

所有的选定元素连在一起，那么wrapAll()很好理解

$('em').wrapAll('<b></b>');

得到的结果是

<b>

<em>hello world！</em>

<em>hello world！</em>

<em>hello world！</em>

<em>hello world！</em>

</b>

2、如果选定的元素是 分散的或者 根本不在同一级别

这种选定元素排列是分撒的

<em>hello world！</em>

<em>hello world！</em>

<strong> 你好 世界！</strong>

<em>hello world！</em>

<strong> 你好 世界！</strong>

<em>hello world！</em>

这种选定元素排列是不再同一级的

<em>hello world！</em>

<em>hello world！</em>

<p>

<strong> 你好 世界！</strong>

<em>hello world！</em>

</p>

<em>hello world！</em>

<em>hello world！</em>

如果我们此时执行$('em').wrapAll('<b></b>');

那么得到的结果是什么呢？

第一种

第二种：

3、其中还有一种情况那么就是我们选定的元素中含有子元素的时候，这时候选定元素的子元素会不会也倍抽离，答案是会的。如果子元素不抽离，文档的元素节点的层级就会发生改变，我想 儿子突然叫自己老爸一句老哥，想必谁也不能接受。

运行代码：$('b').wrapAll(‘div></div>'); 结果如下

那么根据代码执行的结果可知：

我认为可以是wrapAll()分三步走：

1、找到所有选定元素 提取后按选定元素的先后顺序进行排列，其中第一个选定的元素在文档中的位置不变。（如果选定元素有后代，一并提取）。

解释下：我们所有的元素在问文档中都有个先后顺序，那么我们提取的元素，无论是多少个，那么它们的排列顺序就像在文档中原先的顺序一样，在前面的元素永远在前面，在后面的元素永远在后面，

我们选中的所有元素只有第一个元素在文档中的位置不变，其它选中的元素与其在同一级别并排列在首位元素（e:first）的后面。

2将所有匹配元素用一个元素包裹。

3、文档中剩余的元素按原先的方式进行排列，只不过其中选中的元素已经被取走了。就像例子2中p元素中的em元素。

这是一个初学jquery的初学者的一点理解，如有不对之处，请批评指正。