0

我需要基本上查找和替换从 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?
});
4

4 回答 4

1

我想你想要

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

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

看这个小提琴的例子

于 2012-10-18T02:37:36.693 回答
1

我不确定您是否在严格寻找 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"));
于 2012-10-18T03:02:58.867 回答
1

以下函数与 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 的文本功能。

您可能要考虑的一个问题是将单词拆分为两个或多个节点。它应该很少见，但很难找到它何时发生。

于 2012-10-18T03:53:10.370 回答
0

试试下面的： 

 $('#my-wrapper li')
于 2012-10-18T02:29:39.423 回答