• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • wrap()

    在每个匹配的元素外层包上一个html元素。

    .wrap(wrappingElement)

    wrappingElement类型: String, Selector, Element, jQuery。一个HTML片段,选择表达式,jQuery对象,或者DOM元素,用来包在匹配元素的外层。

    .wrap(function(index))

    function(index)类型:Function()。回调函数,返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函数内的this指向集合中的当前元素。

    .wrap()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深,但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集,以便之后使用链式方法。

    参数可以是string或者对象只要能形成DOM结构,可以是嵌套的,但是结构只包含一个最里层元素。这个结构会包在每个匹配元素外层。该方法返回没被包裹过的元素的jQuery对象用来链接其他函数。

    考虑下面的HTML:

    <div class="container">
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
    </div>
    

    使用.wrap(),我们可以在inner <div>外层插入一个HTML结构。

    $('.inner').wrap('<div class="new" />');
    

    结果如下:

    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
      </div>
      <div class="new">
        <div class="inner">Goodbye</div>
      </div>
    </div>
    

    该方法的第二种用法允许我们用函数做参数,改函数返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素。例如:

    $('.inner').wrap(function() {
      return '<div class="' + $(this).text() + '" />';
    });
    

    结果如下:

    <div class="container">
      <div class="Hello">
        <div class="inner">Hello</div>
      </div>
      <div class="Goodbye">
        <div class="inner">Goodbye</div>
      </div>
    </div>
    

    例子

    在所有段落外包一个div

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      div { border: 2px solid blue; }
      p { background:yellow; margin:4px; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>Hello</p>
      <p>cruel</p>
      <p>World</p>
    <script>$("p").wrap("<div></div>");</script>
     
    </body>
    </html>
    

    围绕跨距包装新创建的对象树。注意跨距之间的任何内容都会被省略,就像本例中的<strong>(红色文本)。甚至跨距之间的空白也被遗漏了。单击查看源代码以查看原始html。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      div { border:2px blue solid; margin:2px; padding:2px; }
      p { background:yellow; margin:2px; padding:2px; }
      strong { color:red; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <span>Span Text</span>
      <strong>What about me?</strong>
      <span>Another One</span>
    <script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>
     
    </body>
    </html>
    

    Wrap a new div around all of the paragraphs.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      div { border: 2px solid blue; }
      p { background:yellow; margin:4px; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>Hello</p>
      <p>cruel</p>
      <p>World</p>
    <script>$("p").wrap(document.createElement("div"));</script>
     
    </body>
    </html>
    

    将jQuery对象double depth div包装在所有段落周围。注意,它不移动对象,而只是克隆它以环绕其目标.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
     
      div { border: 2px solid blue; margin:2px; padding:2px; }
      .doublediv { border-color:red; }
      p { background:yellow; margin:4px; font-size:14px; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p>Hello</p>
      <p>cruel</p>
      <p>World</p>
      <div class="doublediv"><div></div></div>
    <script>$("p").wrap($(".doublediv"));</script>
     
    </body>
    </html>
    

    Hello

    cruel

    World

    下篇:wrapInner()