js進階 11-13 jquery如何包裹元素和去除元素外的包裹
一、總結
一句話總結：wrap()、wrapAll()、unwrap()、innerWrap()四個方法
1、jquery中unwrap()方法是干嘛的？
去除元素外的包裹元素
54 $('#btn3').click(function(){ 55 $('li').unwrap() 56 $('li').unwrap() 57 })
2、wrap()、wrapAll()、innerWrap()的區別是什么？
外層包，外層用一個包，在里面包
- wrap():把每個被選元素放置在指定的 HTML 內容或元素中。
- wrapAll():將所有匹配的元素用單個元素包裹起來
- wrapInner():將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
二、jquery如何包裹元素和去除元素外的包裹
1、相關知識
包裹節點:
- wrap():把每個被選元素放置在指定的 HTML 內容或元素中。
- wrapAll():將所有匹配的元素用單個元素包裹起來
- unwrap():移出元素的父元素。
- wrapInner():將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
2、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文檔</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style> 10 li{ 11 background: #ccc;margin-top: 25px;width: 150px; 12 } 13 .orange{background: orange} 14 .red{background: red} 15 .green{background: green} 16 .ccc{background: #ccc;} 17 #div1{width: 200px;height: 25px;} 18 </style> 19 </style> 20 </head> 21 <body> 22 <div id="div1" class="ccc"></div> 23 <ol> 24 <li class="orange">列表項1</li> 25 <li class="red"><i>列表項2</i></li> 26 <li class="green">列表項3</li> 27 </ol> 28 <input id="btn1" type="button" value='wrap'> 29 <input id="btn2" type="button" value='wrapAll'> 30 <input id="btn3" type="button" value='unwrap'> 31 <input id="btn4" type="button" value='wrapInner'> 32 33 34 <script type="text/javascript"> 35 $(function(){ 36 $('#btn1').click(function(){ 37 // $('li').wrap('<div class="ccc"></div>') 38 $('li').wrap($('#div1')) 39 //已存在的元素不會被移動，只會被復制，並包裹被選元素。 40 // $('li').wrap(function(){ 41 // return '<div class="ccc"></div>' 42 // }) 43 44 }) 45 $('#btn2').click(function(){ 46 // $('li').wrapAll('<div class="ccc"></div>') 47 //$('li').wrapAll($('#div1')) 48 $('li').wrapAll(function(){ 49 return '<div class="ccc"></div>' 50 }) 51 }) 52 // $('li').wrap('<div class="ccc"></div>') 53 // $('li').wrap('<div class="ccc"></div>') 54 $('#btn3').click(function(){ 55 $('li').unwrap() 56 $('li').unwrap() 57 }) 58 $('#btn4').click(function(){ 59 // $('li').wrapInner($('#div1')) 60 $('li').wrapInner(function(){ 61 return '<div class="ccc"></div>' 62 }) 63 }) 64 }) 65 </script> 66 </body> 67 </html>