jQuery DOM节点的复制与替换 – DOM包裹wrapAll()方法

wrap是针对单个dom元素处理,如果要将合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,JQuery提供了一个wrapAll方法。

.wrapAll( wrappingElement )给集合中匹配的元素增加一个外面包裹HTML结构

简单的看一段代码:

<p>p元素</p>
<p>p元素</p>

给所有p元素增加一个div包裹

$('p').wrapAll('<div></div>')

最后的结构,2个P元素都增加了一个父div的结构

<div>
<p>p元素</p>
<p>p元素</p>
</div>

.wrapAll( function ) 一个回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

通过回调的方式可以单独处理每一个元素

以上面案例为例,

$('p').wrapAll(function() {
return '<div><div/>'; 
})

以上的写法的结果如下,等同于warp的处理了

<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>

注意:

.wrapAll()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注