当前位置：首页 > news >正文

js进阶 11-13 jquery如何包裹元素和去除元素外的包裹

news 来源：原创 2024/5/2 20:29:57

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>