Skip to main content
 首页 » 编程设计

jQuery之.wrap()方法

2022年07月19日47虾米姐

1.  .wrap()方法:在每个匹配的元素外层包上一个html元素。

2.  有两种使用方法:

  • .wrap(wrappingElement):其中wrappingElement可以是一个HTML片段,选择表达式,jQuery对象,或者DOM元素,用来包在匹配元素的外层。
    <!DOCTYPE html> 
    <html> 
     
        <head> 
            <meta charset="UTF-8"> 
            <title></title> 
            <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
        </head> 
     
        <body> 
            <div class="container"> 
                <div class="inner">Hello</div> 
                <div class="inner">Goodbye</div> 
            </div> 
        </body> 
         
        <script type="text/javascript"> 
            $(function(){ 
                $('.inner').wrap('<div class="new"></div>'); 
            }); 
        </script> 
     
    </html>

    浏览器中显示的代码:

  • .wrap(function(index)):回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函函数内的this指向集合中的当前元素。
    <!DOCTYPE html> 
    <html> 
     
        <head> 
            <meta charset="UTF-8"> 
            <title></title> 
            <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
        </head> 
     
        <body> 
            <div class="container"> 
                <div class="inner">Hello</div> 
                <div class="inner">Goodbye</div> 
            </div> 
        </body> 
         
        <script type="text/javascript"> 
            $(function(){ 
                $('.inner').wrap(function(){ 
                    return "<div class='>"+$(this).text()+"<'/div>" 
                }); 
            }); 
        </script> 
     
    </html>

    浏览器中显示的代码:

    

3.  这个方法还是十分简单的,我在看代码的时候不知道这是个什么方法,但是查阅了API后就知道这个方法的作用了。


本文参考链接:https://www.cnblogs.com/wgl1995/p/6252865.html