wrapAll()
在所有匹配元素外面包一层HTML结构。
.wrapAll (wrappingElement)
wrappingElement类型: String, Selector, Element, jQuery。用来包在外面的HTML片段,选择表达式,jQuery对象或者DOM元素。
.wrapAll()
函数可以接受任何字符串或对象,可以传递给$()
工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。
考虑下面的HTML:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
如果我们对inner元素用.wrapAll():
$('.inner').wrapAll('<div class="new" />');
结果如下:
<div class="container"> <div class="new"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div> </div>
例子
在所有段落外包上新的div:
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <script>$("p").wrapAll("<div></div>");</script> </body> </html>
为 span 标签包裹一个对象树。注意,任何 span 之间的元素都不会被包裹,例如例子中使用的<strong>(红色文本)。即使是 span 之间的空格也不会被包裹。可以查看原始 HTML 的源代码。
<!DOCTYPE html> <html> <head> <style> div { border:2px blue solid; margin:2px; padding:2px; } p { background:yellow; margin:2px; padding:2px; } strong { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <span>Span Text</span> <strong>What about me?</strong> <span>Another One</span> <script>$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");</script> </body> </html>
用一个 div 将所有的段落包裹起来。
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <script>$("p").wrapAll(document.createElement("div"));</script> </body> </html>
使用一个嵌套深度为两层 div 的 jQuery 对象来包裹所有的段落。注意,这并不会移动用于包裹的对象,只是将克隆后的对象用于包裹。
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; margin:2px; padding:2px; } .doublediv { border-color:red; } p { background:yellow; margin:4px; font-size:14px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <div class="doublediv"><div></div></div> <script>$("p").wrapAll($(".doublediv"));</script> </body> </html>