返回值:jQuerywrap(wrappingElement)
在每个匹配的元素外包裹一个 HTML 结构。
-
1.0 新增wrap(wrappingElement)
wrappingElement (String, Selector, Element, jQuery) 用于包裹匹配元素的 HTML 代码片断,选择器表达式,jQuery 对象,或 DOM 元素。 -
1.4 新增wrap(function(index))
function(index) (Function) 回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函数内的this
指向集合中的当前元素。
任何可传给 $()
工厂的字符串或对象,都可以作为 .wrap()
函数的参数,表示包裹用的 DOM 结构。这种结构可以嵌套多层,但是最内层只能有一个元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。
例如,有如下的 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>
元素会被添加到 DOM 中。结果是每个匹配的元素外,被 <div>
包裹:
<div class="container"> <div class="new"> <div class="inner">Hello</div> </div> <div class="new"> <div class="inner">Goodbye</div> </div> </div>
wrap(function(index)) 方法允许我们指定一个回调函数。这个回调函数会在每个匹配的元素上调用一次。它返回一个 DOM 元素,jQuery 对象,或是 HTML 片断,用于包裹匹配的元素。例如:
$('.inner').wrap(function() { return '<div class="' + $(this).text() + '" />'; });
上述代码产生的结果是,每个用于包裹的 <div>
含有的样式就是对应匹配元素内的文本:
<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="jquery.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("p").wrap("<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="jquery.min.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>
演示:
示例:
为所有的段落包裹一个 div。
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("p").wrap(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="jquery.min.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>