在h2标签中，将特定元素和文本节点用span元素包裹起来。

Question

可以使用jQuery实现以下操作，使得这样的效果：

<h2>
    This is a test 
    <span>i</span>
    mag
    <span>i</span>
    nat
    <span>i</span>
    on  
</h2>

变成了这样：

<h2>
    This is a test 
    <span class="wrap">
       <span>i</span>
       mag
       <span>i</span>
       nat
       <span>i</span>
       on   
    </span>
</h2>

我希望外层的标签可以包含所有内层的标签。 不要觉得这是一个重复的问题，因为我只想包含所有的标签而不是文本“This is a test”。

- Rob

Answer 1

您需要使用$.wrapAll()函数：

$(function () {
  $("h2 span").wrapAll('<span class="wrap" />');
});

.wrap {background: #ccf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>
  This is a test 
  <span>Test</span>
  <span>Test</span>
  <span>Test</span>   
</h2>

- Praveen Kumar Purushothaman

---

这样包裹了span标签，但是每个span标签内的单词现在却位于wrap span标签之外。 - Rob

抱歉，是我的错，我应该使用真实的例子。我已经更新了我的问题。本质上，内部的<span>标签将单词"imagination"中的每个字母i包裹起来。我希望整个单词（包括内部的<span>标签）都被外部的<span>标签包裹起来。这样做是否可行？ - Rob

@Rob 嗯...好的...看看是否可能。 - Praveen Kumar Purushothaman

Answer 2

根据您的更新，您可以根据this是元素还是this.previousSibling是元素来过滤h2元素的内容：

$('h2').contents().filter(function () {
  return $(this).is('span') || $(this.previousSibling).is('span');
}).wrapAll('<span class="wrap" />');

.wrap { color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
    This is a test 
    <span>i</span>
    mag
    <span>i</span>
    nat
    <span>i</span>
    on  
</h2>

或者，您还可以过滤元素和文本节点，并排除具有修剪文本等于“ This is a test”的文本节点：

$('h2').contents().filter(function () {
  return this.textContent.trim() !== 'This is a test';
}).wrapAll('<span class="wrap" />');

.wrap { color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
    This is a test 
    <span>i</span>
    mag
    <span>i</span>
    nat
    <span>i</span>
    on  
</h2>

您也可以直接排除第一个文本节点：

$('h2').contents().filter(function () {
  return this !== this.parentElement.firstChild;
}).wrapAll('<span class="wrap" />');

.wrap { color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
    This is a test 
    <span>i</span>
    mag
    <span>i</span>
    nat
    <span>i</span>
    on  
</h2>

- Josh Crozier