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 结构进行包裹。

您可能对这些资源感兴趣

jQuery DOM节点的删除 – 保留数据的删除操作detach() 如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这...
jQuery基础学习遍历 – closest()方法 以选定的元素为中心,往内查找可以通过find、children方法。如果往上查找,也就是查找当前元素的父辈祖辈元素,jQ...
jQuery DOM节点的复制与替换 – DOM包裹wrapInner()方法 如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery提供了一个w...
jQuery DOM节点的复制与替换 – DOM包裹unwrap()方法 我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反,如果删除选中元素的父元素要如何处理 ? jQuery提供...
jQuery DOM节点的复制与替换 – DOM拷贝clone() 克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆。 .clone()方...
jQuery基础学习遍历 – next()方法 jQuery是一个合集对象,如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,此时可以用next()方...

发表评论

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