925
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.15 技巧：包裹和解包元素
本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.15节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson着，更多章节内容可以访问云栖社区“异步社区”公众号查看
3.15 技巧：包裹和解包元素
如果你想用一个新的HTML元素封装一个已经存在的元素，jQuery提供了多个函数来帮你完成此项工作。每个函数的名字都包含了单词“wrap”，但它们的工作细节却不一样。代码清单3-15演示了wrap()最基本的用法。
代码清单3-15 包裹和解包段落元素
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>The wrap() and unwrap() function</title>
05 <style>
06 /* 请将下列代码移至一个外部的
07 .css文件 */
08 div.wrapper {
09 border: 1px solid red;
10 }
11 </style>
12 </head>
13 <body>
14
15 <h2>Paragraphs below are wrapped. Click the paragraphs to
16 test wrap()</h2>
17
18 <p>Paragraph to wrap</p>
19 <p>Paragraph to wrap</p>
20
21 <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
22
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26
27 $('p').wrap('<div />');
28
29 $('p').click(function() {
30 $(this).unwrap('<div />');
31 });
32
33 });
34 </script>
35 </body>
36 </html>
在这个例子中，每个段落元素都被包裹在它自己的包裹div（wrapper div）里面。然后，使用unwrap()函数移除这些div。
代码清单3-16演示了wrapInner()函数的用法。
代码清单3-16 包裹段落元素的内容
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>The wrapInner() function</title>
05 <style>
06 /* 请将下列代码移至一个外部的
07 .css文件 */
08 div.wrapper {
09 border: 1px solid red;
10 }
11 </style>
12 </head>
13 <body>
14
15 <h2>The paragraphs below are modified with wrapInner()</h2>
16
17 <p>Paragraph to wrap</p>
18 <p>Paragraph to wrap</p>
19
20 <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
21
22 <script>
23 //请将下列代码移至一个外部的.js文件中
24 $(document).ready(function() {
25
26 $('p').wrapInner('<div />');
27
28 // 不能用unwrap()来解包:
29 // $('p').click(function() {
30 // $(this).unwrap('<div />');
31 // });
32
33 });
34 </script>
35 </body>
36 </html>
在这个例子中，段落元素自身没有被包裹。相反，段落元素的内容被包裹了。这意味着现在p元素包含了一个div。unwrap()函数在这个示例中是不能工作的。请记住将div放置在段落元素中不但是个坏习惯，而且还会导致你的HTML代码变得不规范，这个示例只是演示wrapInner()如何工作。
代码清单3-17演示了wrapAll()的用途。
代码清单3-17 包裹一组段落元素
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>The wrapAll() function</title>
05 <style>
06 /* 请将下列代码移至一个外部的
07 .css文件 */
08 div.wrapper {
09 border: 1px solid red;
10 }
11 </style>
12 </head>
13 <body>
14
15 <h2>Paragraphs below are wrapped with wrapAll() Click
16 the paragraphs to unwrap()</h2>
17
18 <p>Paragraph to wrap</p>
19 <p>Paragraph to wrap</p>
20
21 <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
22
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26
27 $('p').wrapAll('<div />');
28
29 $('p').click(function(){
30 $(this).unwrap('<div />');
31 });
32
33 });
34 </script>
35 </body>
36 </html>
在这个示例中，一个包裹div包含了所有选取的段落元素。unwrap()函数则移除这个包裹元素。
最后更新：2017-06-08 13:31:20