0

基本的に、Web サービスからオブジェクトの配列 (コンマで区切られた用語を含む) として取得された単語のリストを検索して置換する必要があります。検索と置換はDOM 内の特定の要素でのみ発生しますが、未知のさまざまな数の子を持つことができます (そのうちの未知の回数ネストすることができます)。

私が苦労している主な部分は、ネストされた要素の量が不明な状態で、すべてのノードを textNode レベルまで選択する方法を考え出すことです。

これは非常に単純化された例です:

Web サービスから取得:

[{
  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

次の関数は 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関数にもよく似ています。

考慮すべき問題の 1 つは、単語が 2 つ以上のノードに分割されていることです。まれなはずですが、いつ発生するかを見つけるのは困難です。

于 2012-10-18T03:53:10.370 に答える
1

厳密に jQuery の回答を探しているかどうかはわかりませんが、JavaScript での 1 つの解決策を次に示します。

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

私はあなたが欲しいと思います

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

#my-wrapperこれにより、子孫が何であれ、すべての子孫が選択されます。

例については、このフィドルを参照してください

于 2012-10-18T02:37:36.693 に答える
0

以下を試してください： 

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