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 标签应该是被正确关闭的。

发表评论

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