Question

考虑我的三部分代码

<div>
Lorem Ispum dolor sit <span class='highlightYellow'>Amet </span>
<br />Lorem  Ispum <span class='highlightYellow'>dolor</span> sit Amet
</div>

<div>
Lorem Ispum dolor sit <span class='highlightYellow'>Amet </span>
Lorem  Ispum <span class='highlightYellow'>dolor</span> sit Amet
<br />
</div>

<div>
Lorem Ispum dolor sit <span class='highlightYellow'>Amet </span>
Lorem  Ispum <span class='highlightYellow'>dolor</span> sit Amet
</div>

和一个按钮

<button>Unwrap text from .hightlightYellow elements</button>

我使用此方法解包

$(".highlightYellow").contents().unwrap();

当由于<div>标记而看到$('div')[i].childNodes之类的<br/>之类的子节点时，div中的内容将成为多个连续的文本节点。两个texnode如何一个接一个地来？这真的不可能。但它来了。

在第三个<div>中，没有<br/>标记。所以它工作正常。我猜测<br/>标记只会导致此问题。或者还有其他方法可以解决这个问题吗？

以下是Fiddle，您可以通过检查元素

来查看问题

Answer 1

http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1312295772

当文档首次通过DOM提供时，只有一个每个文本块的文本节点。用户可以创建相邻的Text节点代表给定元素的内容而没有任何干预标记，但应该意识到没有办法代表这些节点之间用XML或HTML分隔，因此它们不会（在 general）在DOM编辑会话之间保持不变。 normalize（）方法 on Element将任何此类相邻的Text对象合并到一个节点中对于每个文本块;在使用之前建议这样做依赖于特定文档结构的操作，例如使用XPointers进行导航。

$('div').each(function(i, element) {
    element.normalize(); 
   //The normalize() method removes empty Text nodes, and joins adjacent Text nodes.
});

Example

在打开时，hquery在html中导致连续的文本节点

1 个答案: