【jQuery之路】03.2 wrapAll()方法将同个元素汇集——包裹节点

在用wrapAll()方法的时候，遇见了一种情况是这样的：在需要被包裹的元素之间有其他元素，那么其他元素将会被置于后面，而被包裹的元素则会汇集到第一个出现的相关元素之后。

在这之前，我们来了解一下包裹节点，通俗来讲分为分别包裹和全包裹

wrap()、warpAll()、wrapInner()的用法。

1、wrap()（分别包裹）

jQuery代码如下：

<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
<script type="text/javascript">
	$("strong").wrap("<b></b>");//分别包裹
</script>

就会得出如下结果：

<b><strong>1</strong></b>
<b><strong>1</strong></b>
<b><strong>1</strong></b>

2、warpAll()（全包裹）

jQuery代码如下：

<strong>1</strong>
<strong>2</strong>
<strong>3</strong>
<script type="text/javascript">
	$("strong").wrapAll("<b></b>");//全包裹
</script>

就会得出如下结果：

<b>
    <strong>1</strong>
    <strong>2</strong>
    <strong>3</strong>
</b>

问题：

当所要包裹的节点内有其他不相关的节点，会出现什么情况？

看一下代码：

<strong>2.1、</strong>
<span>1.1、</span>
<strong>2.2、</strong>
<strong>2.3、</strong>
<span>1.2、</span>
<span>1.3、</span>
<strong>2.4、</strong>
<span>1.4</span>
<script type="text/javascript">
	$("strong").wrap("<b></b>");//分别包裹
	$("span").wrapAll("<b></b>");//全包裹
</script>

在这里有四个strong标签，之间嵌入了span。

在不加入jQuery语句之前，排序是这样的：

加入wrapAll()方法后，实现的结果是：

可以看出，原本是分散的span标签，被汇集到了一起。

3、wrapInner()

该方法是将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

如以下例子：

<span>1.1、</span>
<script type="text/javascript">
	$("span").wrapInner("<b></b>");//子内容包裹
</script>

显示的结果将会是：

<span><b>1.1、</b></span>

孙节点的层包裹式：

<span>1<!-- 节点1 -->
    <strong>2<!-- 节点2 -->
        <strong>3</strong><!-- 节点3 -->
    </strong>
</span>

在使用的时候，都会涉及到位置的变化以及被包裹的元素有哪些的问题，需要搞清楚，以免误用。