单个元素中的多个文本节点? [英] Multiple Text Nodes in a Single Element?

问题描述

谁能帮我看看下面的截图并解释以下内容:

1. 这是怎么回事?
2. 如何以编程方式检测它?
3. 如何以编程方式修复/摆脱它?

我相信正在发生的事情是我在一个 pre 元素中有多个文本节点......我觉得我多年前在 MDN 上读到过这样的事情是可能的，但我从来没有之前遇到过类似的事情.

jQuery 没有通过 text() 或 html() 显示任何异常(我在控制台中都尝试过，如屏幕截图所示)...它只是显示合并为单个节点的所有文本节点的内容.

未显示的是，当我尝试在控制台中手动修复此问题时，执行以下操作:

$('pre').text($('pre').text())

不是将所有文本节点替换为将所有 3 个的内容合并为一个的单个文本节点，它仅将第一个文本节点的内容替换为所有 3 个的内容.

所有这些都让我很困惑，我找不到任何关于这些的文档，所以如果有人能回答我上面的问题，我真的很感激.

哦，因为我知道有人会问我是怎么做到的，答案是我不太确定我做了什么.我认为这与我的流星项目的html和js之间的循环循环有关:<​​/p>

在我的 html 中，我有这个:

{{text}}</pre>
在我的 javascript 中，我有这个:
输入pre":函数(事件){var newText = $(event.target).text();Ideas.update(this._id, {$set: {text: newText}});}
因此meteor 会自动检查我的数据库中text 的更改，并将最新的副本放入我的pre.它还查看用户何时编辑数据库中的pre 和text.以某种方式执行此操作有时会产生您在上图中看到的内容(有时会产生其他奇怪的行为.)
解决方案
发生了什么事?
pre 元素中有多个文本节点.
<块引用>
如何以编程方式检测它?
$('pre').contents() 将返回元素的子元素列表，包括文本节点.就我而言，我只会有文本节点，因此只需检查列表的长度是否大于 1 即可.如果我不能做出这个假设，我将不得不遍历返回的列表并查看是否有任何两个连续的节点是文本节点.查看来自 jQuery 的文档.
<块引用>
如何以编程方式修复/摆脱它?
$('pre')[0].normalize() 修复了它.请参阅 MDN 规范化文档.
Could someone look at the following screenshot for me and explain the following:


What is going on? 
How can I programmatically detect it?
How can I programmatically fix / get rid of it?
I believe what's happening is I have multiple text nodes in a single pre element... I feel like I read on MDN many years ago that such a thing is possible, but I've never encountered anything like it before now.

jQuery doesn't reveal anything unusual about it via text() or html() (I attempt both in the console as seen in the screenshot)... it simply shows the content of all the text nodes consolidated into a single node.

Not shown is that when I attempt to manually fix this in the console, by doing:
$('pre').text($('pre').text())
Instead of replacing all the text nodes with a single text node with the content of all 3 merged into one, it only replaces the content of the first text node with the content of all 3.

All of this is really confusing me and I can't find any documentation on any of this, so I'd really appreciate it if someone could answer my questions above.

Oh, because I know someone will ask how I did this, the answer is I'm not quite sure what I did. It has something to do with the circular loop between the html and the js of my meteor project, I think:

In my html I have this:
<pre class="editable" contentEditable="true">{{text}}</pre>
And in my javascript I have this:
"input pre": function (event) {
    var newText = $(event.target).text();
    Ideas.update(this._id, {$set: {text: newText}});
}
So meteor is automatically checking for changes to text in my database and putting the latest copy into my pre. It also sees when the user edits the pre and edits the text in the database. Something about doing this somehow, sometimes yields what you see in the picture above (other times it yields other strange behaviors.)
解决方案

  

  
What is going on?
  

There are multiple text nodes in the pre element.

  

  
How can I programmatically detect it?
  

$('pre').contents() will return a list of children of the element, including text nodes. In my case, I'll only ever have text nodes so simply checking if the list has a length greater than 1 will work. If I weren't able to make that assumption, I would have to iterate over the returned list and see if any two consecutive nodes were text nodes. See the documentation from jQuery.

  

  
How can I programmatically fix / get rid of it?
  

$('pre')[0].normalize() fixes it. See the documentation on normalize from MDN.

                        
这篇关于单个元素中的多个文本节点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！