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