Question

假设我的代码片段中有以下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()为我提供了和代码。

我应该如何访问它以将值作为包含“Hi I am”，“....”，“and am 20 years old.”的数组获取，“..... ??

Answer 1

使用原生DOM Node：

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

为您提供所需的数组。

您可能希望在使用$.trim之前修剪条目，因为实际的文本节点包含HTML中的所有空格。

Answer 2

您可以使用.get()方法获取该方法

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

Working Fiddle

如果你检查小提琴，你会发现.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 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();

 });

Answer 3

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

<强> DEMO

通过jQuery访问DOM元素

3 个答案: