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

如果要将合集中的元素内部所有的子元素用其他元素包裹起来,并当作指定元素的子元素,针对这样的处理,JQuery提供了一个wrapInner方法

.wrapInner( wrappingElement )给集合中匹配的元素的内部,增加包裹的HTML结构

听起来有点绕,可以用个简单的例子描述下,简单的看一段代码:

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

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

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

最后的结构,匹配的p元素的内部元素被div给包裹了

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

.wrapInner( function ) 允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容

以上面案例为例,

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

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

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

注意:

 当通过一个选择器字符串传递给.wrapInner() 函数,其参数应该是格式正确的 HTML,并且 HTML 标签应该是被正确关闭的。

您可能对这些资源感兴趣

jQuery DOM节点的删除 – 保留数据的删除操作detach() 如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这...
jQuery基础学习遍历 – find()方法 jQuery是一个合集对象,如果想快速查找DOM树中的这些元素的后代元素,此时可以用find()方法,这也是开发使用频率...
jQuery DOM节点的复制与替换 – DOM包裹wrapAll()方法 wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,J...
jQuery DOM节点的删除 – remove()的有参用法和无参用法 remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定...
jQuery基础学习遍历 – siblings()方法 jQuery是一个合集对象,如果想快速查找指定元集合中每一个元素紧邻的前面后面同辈元素,此时可以用siblings()方...
jQuery DOM节点的插入 – 内部插入prepend()与prependTo() 在元素内部进行操作的方法,除了在被选元素的结尾(仍然在内部)通过append与appendTo插入指定内容外,相应的还可...

发表评论

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