Question

我基本上需要查找并替换从Web服务中作为对象数组（具有逗号分隔的术语）检索的单词列表。 查找和替换仅发生在DOM中的特定元素上，但是它们可以具有未知且不同数量的子节点（其中可以嵌套未知的次数）。

我正在努力解决的主要问题是弄清楚如何选择所有节点到textNode级别，并使用未知数量的嵌套元素。

这是一个非常精简的例子：

取自网络服务：

[{
  terms: 'first term, second term',
  youtubeid: '123qwerty789'
},{
  terms: 'match, all, of these',
  youtubeid: '123qwerty789'
},{
  terms: 'only one term',
  youtubeid: '123qwerty789'
},
etc]

HTML可能类似于：

<div id="my-wrapper">  
  <ol>
    <li>This is some text here without a term</li>
    <li>This is some text here with only one term</li>
    <li>This is some text here that has <strong>the first term</strong> nested!</li>
  </ol>
</div>

使用Javascript：

$('#my-wrapper').contents().each(function(){
  // Unfortunately only provides the <ol> - 
  // How would I modify this to give me all nested elements in a loopable format?
});

Answer 1

我想你想要

$('#my-wrapper *').each

这应该选择#my-wrapper的所有后代，无论它们是什么。

请参阅this fiddle以获取示例

Answer 2

我不确定您是否正在严格查看jQuery答案，但这是JavaScript中的一个解决方案：

var recurse = function(el) {
    // if text node or comment node
    if(el.nodeType == 3 || el.nodeType == 8) {
        // do your work here
        console.log("Text: " + el.nodeValue);
    }else {
        for(var i = 0, children = el.childNodes, len = children.length; i < len; i++) {
            recurse(children[i]);
        }
    }
}
recurse(document.getElementById("my-wrapper"));

Answer 3

以下函数与cbayram非常相似，但应该更高效并跳过脚本元素。您可能也想跳过其他元素。

它基于我已经使用了一段时间的 getText 函数，您的要求类似。唯一的区别是如何处理文本节点的值。

function processTextNodes(element) {
  element = element || document.body;
  var self = arguments.callee;  // or processTextNodes
  var el, els = element.childNodes;

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];

    // Exclude script element content
    // May need to add other node types here
    if (el.nodeType == 1 && el.tagName && el.tagName.toLowerCase() != 'script') {

      // Have an element node, so process it
      self(el);

    // Othewise see if it's a text node
    // If working with XML, add nodeType 4 if you want to process
    // text in CDATA nodes
    } else if (el.nodeType == 3) {

      /* do something with el.data */

    }
  }
  /* return a value? */
}

该函数应该完全与浏览器无关，并且应该适用于任何符合标准的DOM（例如XML和HTML）。顺便说一句，它也与jQuery的 text 函数非常相似。

您可能需要考虑的一个问题是将字分割为两个或更多节点。它应该是罕见的，但在它发生时很难找到。

Answer 4

尝试以下方法：

 $('#my-wrapper li')

在具有未知数量的后代的选择内循环textNodes

4 个答案: