wrap(),wrapAll(),wrapInner()的区别

　　wrap从字面上理解就是包裹的意思，这三个函数也都是起到将内部节点进行包裹的作用，但是他们的各自的功能有又大不相同。

　　1. a.wrap(b)

　　这个函数的作用是用b将a进行包裹，其中a所选中的可以为多个，wrap()也会将这些被选中的节点各自都用b进行包裹。如下：

<div class = 'one'>

	<p>111</p>

</div>

<p>222</p>

<div>333</div>

<p>121212</p>

<div>444</div>

<script>

	var div = $('p');

	div.wrap('<div class = "wrap"></div>');

</script>

　　这段代码将每个p节点都用class为wrap的节点进行包裹，html结构如下：

<div class = 'one'>

    <div class = 'wrap'>

        <p>111</p>

    </div>

</div>

<div class="wrap">

    <p>222</p>

</div>

<div>333</div>

<div class="wrap">

    <p>121212</p>

</div>

<div>444</div>

　　可见每个p节点都被包裹，而且这些p节点都降了一级。包裹的元素占据了p之前的位置。

　　2. a.wrapAll(b)

　　这个函数的作用是将b所匹配到的节点统一到一起，使用一个a来包裹，因此a只包裹了一次。另外倘若b所匹配到的节点并没有紧挨在一起，那么这个函数会将其他的节点迁移到第一个节点所在的位置，使之与第一个节点成为兄弟节点，然后在进行包裹。

<div class = 'one'>

    <p>111</p>

</div>

<p>222</p>

<div>333</div>

<div>

    <p>121212</p>

</div>

<script>

    var div = $('p');

    div.wrapAll('<div class = "wrap"></div>');

</script>

　　这段代码是将所有的p节点使用div进行包裹，其结果如下：

<div class = 'one'>

    <div class="wrap">

        <p>111</p>

        <p>222</p>

        <p>121212</p>

    </div>

</div>

<div>333</div>

<div>

</div>

　　可见无论其他的p标签在什么位置，都会被迁移到第一个p标签的位置。

　　3. a.wrapInner(b)

　　这个函数的作用是用b将a内部的内容进行包裹。不论是文本节点还是元素节点。

<div class = 'one'>

    <p>111</p>

</div>

<script>

    var div = $('.one');

    div.wrapInner('<div class = "wrap"></div>');

</script>

　　这段代码是将class为one的div的内部内容进行包裹，其结果如下：

<div class = 'one'>

	<div class="wrap">

		<p>111</p>

	</div>

</div>

巴特西

wrap(),wrapAll(),wrapInner()的区别

最新文章

热门文章