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

您可以使用.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);
    }
});

Answer 3

在if块中添加else

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

如何从jQuery中的类中选择没有标记的子元素

3 个答案: