js进阶 11-13 jquery如何包裹元素和去除元素外的包裹
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>
