在用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>
在使用的时候,都会涉及到位置的变化以及被包裹的元素有哪些的问题,需要搞清楚,以免误用。