.wrap()
描述: 在每个匹配的元素外层包上一个html元素。
-
.wrap( wrappingElement )
-
wrappingElement类型: String, Selector, Element, jQuery一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。
-
-
添加的版本: 1.4.wrap( function(index) )
-
function(index)类型: Function()回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函数内的
this指向集合中的当前元素。
-
.wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。
参数可以是string或者对象只要能形成DOM结构，可以是嵌套的，但是结构只包含一个最里层元素。这个结构会包在每个匹配元素外层。该方法返回没被包裹过的元素的jQuery对象用来链接其他函数。
该方法的第二种用法允许我们用函数做参数，改函数返回一个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>
Example: 在所有段落外包一个div
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <script>$("p").wrap("<div></div>");</script> </body> </html>
Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original 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="http://code.jquery.com/jquery-latest.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="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <script>$("p").wrap(document.createElement("div"));</script> </body> </html>
Wrap a jQuery object double depth div around all of the paragraphs. Notice it doesn't move the object but just clones it to wrap around its target.
<!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="http://code.jquery.com/jquery-latest.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>
.wrapAll()
描述: 在所有匹配元素外面包一层HTML结构。
-
添加的版本: 1.2.wrapAll( wrappingElement )
-
wrappingElement类型: String, Selector, Element, jQuery用来包在外面的HTML片段，选择表达式，jQuery对象或者DOM元素。
-
.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。
Example: 在所有段落外包上新的div:
<!DOCTYPE html> <html> <head> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <script>$("p").wrapAll("<div></div>");</script> </body> </html>
.wrapInner()
描述: 在匹配元素里的内容外包一层结构。
-
添加的版本: 1.2.wrapInner( wrappingElement )
-
wrappingElement类型: String用来包在匹配元素的内容外面的HTML片段，选择表达式，jQuery对象或者DOM元素。
-
-
添加的版本: 1.4.wrapInner( function(index) )
-
function(index)类型: Function()一个返回HTML结构的函数，用来包在匹配元素内容的外面。接收集合中元素的索引位置作为参数。在函数中 ，
this指向集合中当前的元素。
-
选中所有段落，然后在段落内容外加粗体：
<!DOCTYPE html> <html> <head> <style>p { background:#bbf; }</style> <script src="http://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>