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); 
    } 
  } 
}

次に、この関数を呼び出して、目的の要素をパラメーターとして渡し、テキスト ノードの特定の処理を function として記述した場合に使用できますprocessText(text, parent)。

注: にはchildNodes、ドキュメント ソースに表示される順序で子が含まれていると想定しています。これは非常に自然に聞こえますが、奇妙なことに、仕様でこれに関する要件を見つけることができません。おそらく、自明のことと見なされています。

于 2012-10-09T06:22:26.217 に答える