5

コードに次の DOM 要素があるとします。

<div id="test">
    <div id="t2">
       Hi I am
       <b>Gopi</b>
       and am 20 years old.
       <p id="div2">
         <button onclick="alert('lol')">Check</button>
       </p>
    </div>
</div>

div#t2 の内容をトラバースしたいとします。

$("#t2").children()<b>と<p>タグをくれます。

では、" "、" "、" "、"を含む配列として値を取得するには、どのようHi I am<b>....</b>and am 20 years old.<p>.....</p> にアクセスすればよいでしょうか??

4

3 に答える 3

5

ネイティブ DOM Nodeを使用します。

$('#t2')[0].childNodes

必要な配列を提供します。

実際のテキスト ノードには HTML 内のすべての空白が含まれているため、使用する前に$.trimを使用してエントリをトリミングすることをお勧めします。

于 2012-06-04T18:07:11.557 に答える
2

.get()あなたは方法を使用してそれを得ることができます

var arr = $("#t2").contents().get();

ワーキングフィドル

フィドルをチェックすると、次のよう.contents()な配列が返されていることがわかります。

textとhtmlのような要素

 [text1,html1,text2,html2,text3]

 //Where
 text1 == Hi I am
 html1 == <b>Gopi</b>
 text2 == and am 20 years old. 
 html2 == <p id="div2"><button onclick="alert('lol')">Check</button></p>

それは完全に理にかなっていますが、最後はtext3どこから来ていますか。

<p>タグの最後に別のテキストノードがあります

 <p id="div2">....</p> <-- Here, newline is 
                           another text node(the last one)

したがって、使用する場合は.contentsそれを覚えておいてください。

トリミングされたデータを取得するには、次のような$.mapを使用します

var arr = $("#t2").contents().map(function(){
 if (this.nodeType == 3)
     return $.trim(this.nodeValue) || null; 
                                     // this null to omit last textnode
 else
     return $('<div />').append(this).html();

 });
于 2012-06-04T18:07:45.580 に答える
1 
var result = [];

$("#t2").contents().map(function(index, el) {
    console.log(el);
    if(el.nodeType == 3) {
        result.push($.trim( $(el).text() ));
    } else {
        if(el.tagName.toLowerCase() == 'b') {
          result.push('<b>' + el.innerHTML + '</b>');
        } else if(el.tagName.toLowerCase() == 'p') {
          result.push('<p>' + el.innerHTML + '</p>');            
        }
   }
});

デモ

于 2012-06-04T18:46:41.497 に答える