返回值:jQuerywrapInner(wrappingElement)
为每个匹配元素的内容包裹一个 HTML 结构。
-
1.2 新增wrapInner(wrappingElement)
wrappingElement (String) 用于包裹匹配元素内容的 HTML 代码片断,选择器表达式,jQuery 对象,或 DOM 元素。 -
1.4 新增wrapInner(function(index))
function(index) (Function) 回调函数,返回用于包裹匹配元素内容的结构。index 参数表示匹配元素在集合中的集合。该函数内的this
指向集合中的当前元素。
任何可传给 $()
工厂的字符串或对象,都可以作为 .wrapInner()
函数的参数,表示包裹用的 DOM 结构。这种结构可以嵌套多层,但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。
例如,有如下的 HTML:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
使用 .wrapInner()
,我们可以在含有 inner 样式的 <div>
的内容外部,包裹一个 div。这像下面这样:
$('.inner').wrapInner('<div class="new" />');
新的 <div>
元素会被添加到 DOM 中。其结果是新的 <div>
包裹了每个匹配元素的内容:
<div class="container"> <div class="inner"> <div class="new">Hello</div> </div> <div class="inner"> <div class="new">Goodbye</div> </div> </div>
wrapInner(function(index)) 方法允许我们指定一个回调函数。这个回调函数会在每个匹配的元素上调用一次。它返回一个 DOM 元素,jQuery 对象,或是 HTML 片断,用于包裹匹配元素的内容。例如:
$('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />'; });
上述代码产生的结果是,每个用于包裹的 <div>
含有的样式就是对应匹配元素内的文本:
<div class="container"> <div class="inner"> <div class="Hello">Hello</div> </div> <div class="inner"> <div class="Goodbye">Goodbye</div> </div> </div>
注意: 如果将一个选择符字符串传给 .wrapInner()
函数时,其参数应该是格式正确的 HTML,并且 HTML 标签应该是被正确关闭的。下面是一些正确的例子:
$(elem).wrapInner("<div class='test' />"); $(elem).wrapInner("<div class='test'></div>"); $(elem).wrapInner("<div class=\"test\"></div>");
示例:
选择所有的段落,并用 b 标签包裹每个匹配元素的内容。
<!DOCTYPE html>
<html>
<head>
<style>p { background:#bbf; }</style>
<script src="jquery.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("p").wrapInner("<b></b>");
</script>
</body>
</html>
演示:
示例:
为 body 元素的内容包裹一个对象树。
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px green solid; margin:2px; padding:2px; }
p { background:yellow; margin:2px; padding:2px; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
Plain old text, or is it?
<script>
$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
</script>
</body>
</html>
演示:
示例:
选择所有的段落,并用 b 标签包裹每个匹配元素的内容。
<!DOCTYPE html>
<html>
<head>
<style>p { background:#9f9; }</style>
<script src="jquery.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("p").wrapInner(document.createElement("b"));
</script>
</body>
</html>
演示:
示例:
选择所有的段落,并用 jQuery object 包裹每个匹配元素的内容。
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#9f9; }
.red { color:red; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("p").wrapInner($("<span class='red'></span>"));
</script>
</body>
</html>