如何從一個類中的jQuery

Question

選擇子元素無標籤我做了下面的函數從類解析所有子元素 ：

function getBodyHTML(data){ 
    var elements = ""; 
    var content = $(data).find(".mw-content-ltr").children(); 
    $(content).each(function(i, row){ 
     if($(row).is("h2")){   
      elements = elements.concat("<h2 class="header2">Header 2 content is: "+($(row).text())+"</h1>"); 
     }else if($(row).is("h1")){ 
      elements = elements.concat("<h1 class="header1">Header 1 content is: "+($(row).text())+"</h1>"); 
     }else if($(row).is("h3")){ 
      elements = elements.concat("<h3>"+($(row).text())+"</h3>"); 
     }else if($(row).is("p")){ 
      elements = elements.concat("<p>"+$(row).text()+"</p>"); 
     } 

    }); 

     return elements; 
    } 

這個函數做什麼，我想對於這種 的html：

<h2 class="main-header">Some Text</h2> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh. </p> 
<p>euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim</p> 
<h1>Another text</h1> 
<p>euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p> 

但是，當談到HTML這種方式我不能獲取全文：

<h2 class="main-header">Some Text</h2> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh. 
<h1>Another text</h1> 
<p>euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim</p> 

如您所見，h2之後的第一個文本沒有任何標籤。

我應該在我的函數中添加什麼條件來選擇那些沒有標籤的文本呢？

在此先感謝！

Answer 1

您可以使用contents()而不是children()獲取文本節點。

文本節點有nodeType的3。

下面是幾個例子：

http://jsfiddle.net/A2Lyx/

這裏是你如何可以改變你的代碼：

function getBodyHTML(data) { 
    var elements = ""; 
    var content = $(data).find(".mw-content-ltr").contents(); 
    $(content).each(function (i, row) { 
     if (row.nodeType == 3) { 
      var text = $.trim(row.textContent); 
      if (text.length > 0) 
       elements = elements.concat("text content: " + text); 
     else if ($(row).is("h2")) { 
      elements = elements.concat("<h2 class=" 
      header2 ">Header 2 content is: " + ($(row).text()) + "</h1>"); 
     } else if ($(row).is("h1")) { 
      elements = elements.concat("<h1 class=" 
      header1 ">Header 1 content is: " + ($(row).text()) + "</h1>"); 
     } else if ($(row).is("h3")) { 
      elements = elements.concat("<h3>" + ($(row).text()) + "</h3>"); 
     } else if ($(row).is("p")) { 
      elements = elements.concat("<p>" + $(row).text() + "</p>"); 
     } 
    }); 

    return elements; 
} 

Answer 2

別人加入你如果塊

else{ 
    elements = elements.concat($(row).html()); 
} 

喜歡的東西：

function getBodyHTML(data){ 
var elements = ""; 
var content = $(data).find(".mw-content-ltr").children(); 
$(content).each(function(i, row){ 
    if($(row).is("h2")){   
     elements = elements.concat("<h2 class="header2">Header 2 content is: "+($(row).text())+"</h1>"); 
    }else if($(row).is("h1")){ 
     elements = elements.concat("<h1 class="header1">Header 1 content is: "+($(row).text())+"</h1>"); 
    }else if($(row).is("h3")){ 
     elements = elements.concat("<h3>"+($(row).text())+"</h3>"); 
    }else if($(row).is("p")){ 
     elements = elements.concat("<p>"+$(row).text()+"</p>"); 
    } 
    else{ 
     elements = elements.concat($(row).html()); 
    } 

}); 

    return elements; 
} 

Answer 3

可以使用.contents()方法，而不是.children()和檢查節點的nodeType：

$(data).find(".mw-content-ltr").contents().each(function(_, row) { 
    // ... 
    } else if (row.nodeType === 3 && $.trim(row.nodeValue).length) { 
     var textNodeValue = $.trim(row.nodeValue); 
    } 
});