• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • wrapAll()

    在所有匹配元素外面包一层HTML结构。

    .wrapAll(wrappingElement)

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

    .wrapAll()函数可以接受任何字符串或对象,可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。

    考虑下面的HTML:

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

    如果我们对inner元素用.wrapAll():

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

    结果如下:

    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
        <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").wrapAll("<div></div>");</script>
     
    </body>
    </html>
    

    为 span 标签包裹一个对象树。注意,任何 span 之间的元素都不会被包裹,例如例子中使用的<strong>(红色文本)。即使是 span 之间的空格也不会被包裹。可以查看原始 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").wrapAll("<div><div><p><em><b></b></em></p></div></div>");</script>
     
    </body>
    </html>
    

    用一个 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").wrapAll(document.createElement("div"));</script>
     
    </body>
    </html>
    

    使用一个嵌套深度为两层 div 的 jQuery 对象来包裹所有的段落。注意,这并不会移动用于包裹的对象,只是将克隆后的对象用于包裹。

    <!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").wrapAll($(".doublediv"));</script>
     
    </body>
    </html>
    

    上篇:wrap()

    下篇:wrapInner()