.wrapInner()
.wrapInner( wrappingElement ) 返回jQuery
描述:在匹配元素里的內(nèi)容外包一層結(jié)構(gòu)。
-
version added: 1.2.wrapInner( wrappingElement )
wrappingElement用來(lái)包在匹配元素的內(nèi)容外面的HTML片段,選擇表達(dá)式,jQuery對(duì)象或者DOM元素。
-
version added: 1.4.wrapInner( wrappingFunction )
wrappingFunction一個(gè)返回HTML結(jié)構(gòu)的函數(shù),用來(lái)包在匹配元素內(nèi)容的外面。
參數(shù)可以是string或者對(duì)象,只要能形成DOM結(jié)構(gòu),可以是嵌套的,但是結(jié)構(gòu)只包含一個(gè)最里層元素。這個(gè)結(jié)構(gòu)會(huì)包住所有匹配元素的內(nèi)容。
例子:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
用.wrapInner()
, 我們可以再inner元素的內(nèi)容外加一個(gè)新的div:
$('.inner').wrapInner('<div class="new" />');
結(jié)果:
<div class="container"> <div class="inner"> <div class="new">Hello</div> </div> <div class="inner"> <div class="new">Goodbye</div> </div> </div>
該方法的第二種用法允許我們用一個(gè)callback函數(shù)做參數(shù),每次遇到匹配元素時(shí),該函數(shù)被執(zhí)行,返回一個(gè)DOM元素,jQuery對(duì)象,或者HTML片段,用來(lái)包住匹配元素的內(nèi)容。
$('.inner').wrapInner(function() { return '<div class="' + this.nodeValue + '" />'; });
這將使得每個(gè)div有和他文本內(nèi)容一樣名字的class:
<div class="container"> <div class="inner"> <div class="Hello">Hello</div> </div> <div class="inner"> <div class="Goodbye">Goodbye</div> </div> </div>
例子:
例子:選中所有段落,然后在段落內(nèi)容外加粗體:
<!DOCTYPE html>
<html>
<head>
<style>p { background:#bbf; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrapInner("<b></b>");</script>
</body>
</html>
Demo:
例子:生成一個(gè)jQuery對(duì)象樹(shù)然后將它包在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="http://code.jquery.com/jquery-latest.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>
Demo:
Example: 選中所有段落然后在段落內(nèi)容外包上粗體標(biāo)簽。
<!DOCTYPE html>
<html>
<head>
<style>p { background:#9f9; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrapInner(document.createElement("b"));</script>
</body>
</html>
Demo:
例子:選中所有段落然后在段落內(nèi)容外包上一個(gè)jQuery對(duì)象。
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#9f9; }
.red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrapInner($("<span class='red'></span>"));</script>
</body>
</html>