wrap()
在每个匹配的元素外层包上一个html元素。
.wrap(wrappingElement)
wrappingElement类型: String, Selector, Element, jQuery。一个HTML片段,选择表达式,jQuery对象,或者DOM元素,用来包在匹配元素的外层。
.wrap(function (index))
function(index)
类型:Function()。回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函数内的this
指向集合中的当前元素。
.wrap()
函数可以接受任何字符串或对象,可以传递给$()
工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。
参数可以是string或者对象只要能形成DOM结构,可以是嵌套的,但是结构只包含一个最里层元素。这个结构会包在每个匹配元素外层。该方法返回没被包裹过的元素的jQuery对象用来链接其他函数。
考虑下面的HTML:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
使用.wrap()
,我们可以在inner <div>
外层插入一个HTML结构。
$('.inner').wrap('<div class="new" />');
结果如下:
<div class="container"> <div class="new"> <div class="inner">Hello</div> </div> <div class="new"> <div class="inner">Goodbye</div> </div> </div>
该方法的第二种用法允许我们用函数做参数,改函数返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素。例如:
$('.inner').wrap(function () {return '<div class="' + $(this ).text() + '" />'; });
结果如下:
<div class="container"> <div class="Hello"> <div class="inner">Hello</div> </div> <div class="Goodbye"> <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").wrap("<div></div>");</script> </body> </html>
围绕跨距包装新创建的对象树。注意跨距之间的任何内容都会被省略,就像本例中的<strong>(红色文本)。甚至跨距之间的空白也被遗漏了。单击查看源代码以查看原始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").wrap("<div><div><p><em><b></b></em></p></div></div>");</script> </body> </html>
Wrap a new div around all of the paragraphs.
<!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").wrap(document.createElement("div"));</script> </body> </html>
将jQuery对象double depth div包装在所有段落周围。注意,它不移动对象,而只是克隆它以环绕其目标.
<!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").wrap($(".doublediv"));</script> </body> </html>
Hello
cruel
World