• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： jQuery 中文手册 -> jQuery 对DOM操作 -> jQuery 包裹插入

    wrapInner()

    在匹配元素里的内容外包一层结构。

    .wrapInner(wrappingElement)

    wrappingElement类型: String。用来包在匹配元素的内容外面的HTML片段，选择表达式，jQuery对象或者DOM元素。

    .wrapInner(function(index))

    .wrapInner(wrappingElement)

    function(index)类型:Function()。一个返回HTML结构的函数，用来包在匹配元素内容的外面。接收集合中元素的索引位置作为参数。在函数中，this指向集合中当前的元素。

    .wrapInner()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。

    考虑下面的HTML：

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

    用.wrapInner(),我们可以再inner元素的内容外加一个新的<div>元素，像这样:

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

    结果如下：

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

    .wrapInner(function(index))

    该方法允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容。例如：

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

    这将使得每个<div>有和他文本内容一样名字的class:

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

    注意:当通过一个选择器字符串传递给.wrapInner()函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。下面是一些正确的例子：

    $(elem).wrapInner("<div class='test' />");
$(elem).wrapInner("<div class='test'></div>");
$(elem).wrapInner("<div class=\"test\"></div>");

    例子

    选中所有段落，然后在段落内容外加粗体：

    <!DOCTYPE html>
<html>
<head>
  <style>p { background:#bbf; }</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").wrapInner("<b></b>");</script>
 
</body>
</html>

    为 body 元素的内容包裹一个对象树

    <!DOCTYPE html>
<html>
<head>
  <style>
 
  div { border:2px green solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  </style>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
</head>
<body>
  Plain old text, or is it?
<script>$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");</script>
 
</body>
</html>

    选择所有的段落，并用 b 标签包裹每个匹配元素的内容。

    <!DOCTYPE html>
<html>
<head>
  <style>p { background:#9f9; }</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").wrapInner(document.createElement("b"));</script>
 
</body>
</html>

    选择所有的段落，并用 jQuery object 包裹每个匹配元素的内容。

    <!DOCTYPE html>
<html>
<head>
  <style>
 
  p { background:#9f9; }
  .red { color:red; }
  </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").wrapInner($("<span class='red'></span>"));</script>
 
</body>
</html>

    上篇：wrapAll()