如何将跨度添加到未受限制的节点的所有区域

Question

这是What's a good way to show parts of an element but hide the rest?

的延续

<h1>
  Let's say you had this <span class="safe">text</span>.
</h1>

如何用safe类（使用jQuery）包装所有非disappear区域。

最终输出

<h1>
  <span class="disappear">Let's say you had this </span>
  <span class="safe">text</span>
  <span class="disappear">.</span>
</h1>

这样，parent node仍然可见，但非safe区域消失，留下safe。

我不知道该怎么做，但肯定有可能。

Answer 1

文本节点的nodeType为3.迭代节点并使用wrap()包装文本节点。：

$someElement.contents().each(function() {
    if (this.nodeType == 3)
        $(this).wrap('<span class="disappear" />');
});

http://jsfiddle.net/SnjnJ/

Answer 2

过滤textNodes并将它们换成span：

$('h1').contents().filter(function() {
    return this.nodeType === 3;
}).wrap('<span class="disappear" />');

FIDDLE

Answer 3

$('h1').children().not('.safe').hide(); 

http://jsfiddle.net/VeSCw/

Answer 4

匹配h1的所有内容，并使用.not()从您的选择中删除safe。然后使用.wrap()使它们“消失”。

http://api.jquery.com/not/