描述: 在匹配元素里的内容外包一层结构。
-
添加的版本: 1.2.wrapInner( wrappingElement )
-
wrappingElement类型: String用来包在匹配元素的内容外面的HTML片段,选择表达式,jQuery对象或者DOM元素。
-
-
添加的版本: 1.4.wrapInner( function(index) )
-
function(index)类型: Function()一个返回HTML结构的函数,用来包在匹配元素内容的外面。接收集合中元素的索引位置作为参数。在函数中 ,
this
指向集合中当前的元素。/div>.wrapInner()
函数可以接受任何字符串或对象,可以传递给$()
工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。考虑下面的HTML:
1234<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
用
.wrapInner()
, 我们可以再inner元素的内容外加一个新的<div>
元素,像这样:1$('.inner').wrapInner('<div class="new" />');
结果如下:
12345678<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
该方法的第二种用法允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容。例如:
123$('.inner').wrapInner(function() {
return '<div class="' + this.nodeValue + '" />';
});
这将使得每个
<div>
有和他文本内容一样名字的class:12345678<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 标签应该是被正确关闭的。下面是一些正确的例子:123$(elem).wrapInner("<div class='test' />");
$(elem).wrapInner("<div class='test'></div>");
$(elem).wrapInner("<div class="test"></div>");
例子:
Example: 选中所有段落,然后在段落内容外加粗体:
123456789101112131415<!DOCTYPE html>
<html>
<head>
<style>p { background:#bbf; }</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrapInner("<b></b>");</script>
</body>
</html>
Example: 为 body 元素的内容包裹一个对象树
12345678910111213141516<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px green solid; margin:2px; padding:2px; }
p { background:yellow; margin:2px; padding:2px; }
</style>
<script src="https://code.jquery.com/jquery-latest.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>
Example: 选择所有的段落,并用 b 标签包裹每个匹配元素的内容。
123456789101112131415<!DOCTYPE html>
<html>
<head>
<style>p { background:#9f9; }</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrapInner(document.createElement("b"));</script>
</body>
</html>
Example: 选择所有的段落,并用 jQuery object 包裹每个匹配元素的内容。
123456789101112131415161718<!DOCTYPE html>
<html>
<head>
<style>
p { background:#9f9; }
.red { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrapInner($("<span class='red'></span>"));</script>
</body>
</html>
转载请注明:悠然品鉴 » jQuery .wrapInner() 用法 手册 | 示例代码
-