返回值:jQuerywrapInner(wrappingElement)

为每个匹配元素的内容包裹一个 HTML 结构。

任何可传给 $() 工厂的字符串或对象,都可以作为 .wrapInner() 函数的参数,表示包裹用的 DOM 结构。这种结构可以嵌套多层,但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。

例如,有如下的 HTML:

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

使用 .wrapInner(),我们可以在含有 inner 样式的 <div> 的内容外部,包裹一个 div。这像下面这样:

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

新的 <div> 元素会被添加到 DOM 中。其结果是新的 <div> 包裹了每个匹配元素的内容:

<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)) 方法允许我们指定一个回调函数。这个回调函数会在每个匹配的元素上调用一次。它返回一个 DOM 元素,jQuery 对象,或是 HTML 片断,用于包裹匹配元素的内容。例如:

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

上述代码产生的结果是,每个用于包裹的 <div> 含有的样式就是对应匹配元素内的文本:

<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>");

示例:

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

<!DOCTYPE html>
<html>
<head>
<style>p { background:#bbf; }</style>
<script src="jquery.min.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="jquery.min.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="jquery.min.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="jquery.min.js"></script>
</head>
<body>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

<script>

$("p").wrapInner($("<span class='red'></span>"));

</script>
</body>
</html>

演示: