0

考虑以下标记：

<div>Hello, my <span>name</span> is John</div>

我需要按顺序获取文本节点和包含它们的元素，如下所示：

1："Hello, my "，<div>（HTML元素）

2："name"，<span>（HTML元素）

3：" is John"，<div>（HTML元素）

这需要以一种允许我稍后获得 HTMLElements 的 CSS 样式的方式完成。

我已经尝试过的：

$(foo).find('*').contents().filter(function() {
    var $this = $(this);
    return this.nodeType === 3 && $.trim($this.text()).length > 0; 
});

这会产生一个不连续的结果集，如下所示：

1："Hello, my "

2：" is John"

3："name"

但是，我可以访问它们的父元素，所以这完成了一半的工作。

因此，主要问题是：如何以与文档中相同的顺序获取文本节点？

4

1 回答 1

2

正如 Norguard 的评论中所述，这可以通过遍历文档树来解决：

function process(element) { 
  var children = element.childNodes; 
  for(var i = 0; i < children.length; i++) { 
    var child = children[i]; 
    if(child.nodeType === 3) { 
      if(child.data) { 
        processText(child.data, element); 
      } 
    } else { 
      process(child); 
    } 
  } 
}

然后，您可以调用此函数，将所需元素作为参数传递，前提是您已将文本节点的特定处理编写为函数processText(text, parent)。

注意：我假设childNodes按照它们在文档源中出现的顺序包含子项。这听起来很自然，但我无法在规范中找到对此的要求，奇怪的是——也许它被认为是不言而喻的。

于 2012-10-09T06:22:26.217 回答