如果要將元素用其他元素包裹起來,也就是給它增加一個父元素,針對這樣的處理,JQuery提供了一個wrap方法
.wrap( wrappingElement ):在集合中匹配的每個元素周圍包裹一個HTML結構
例如下面我們來寫一個例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <p>php 中文网</p> <script> $("p").wrap("<div></div>"); </script> </body> </html>
小夥伴們看如上程式碼,這樣我們就為p 標籤增加了一個父節點 小夥伴們把程式碼複製到本機運行,按F12 可以查看
wrap( function ) :一個回呼函數,傳回用於包裹符合元素的HTML 內容或jQuery 物件
使用後的效果與直接傳遞參數是一樣,只不過可以把程式碼寫在函數體內部,寫法不同而已
下面我們來看實例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <p>php 中文网</p> <script> $('p').wrap(function(){ return '<div>'; }) </script> </body> </html>
小夥伴們可以運行下第二種,其實和第一種的效果是一樣的,只是寫法不一樣而已
注意:wrap()函數可以接受任何字串或對象,可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套了好幾層深,但應該只包含一個核心的元素。每個符合的元素都會被這種結構包裹。此方法傳回原始的元素集,以便之後使用鍊式方法。
下一節