如何从jQuery中的类中选择没有标签的子元素 [英] How to select child elements without tag from a class in jQuery

问题描述

我使用以下函数来解析类中的所有子元素
：
$ b $ pre $函数getBodyHTML（data） {
var elements =;
var content = $（data）.find（。mw-content-ltr）。children（）; （$（行）.is（h2））{
elements = elements.concat（< h2 class =header2>标题2的内容是：+（$（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>）;
}

}）;

返回元素;
}

这个函数完成我想要的这种
html：

 < h2 class =main-header>一些文字< / h2> 
 
 Lorem ipsum dolor sit amet，consectetuer adipiscing elit，
 sed diam nonummy nibh。 < / p为H. 
< p> euismod tincidunt ut laoreet dolore magna aliquam erat 
 volutpat。 U wis en&&< / p> 
< h1>另一文字< / h1> 
< p> euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。 U wis en&&< / p> 
  

但是当HTML以这种方式出现时，我无法获得全文：

 < h2 class =main-header>一些文字< / h2> 
 Lorem ipsum dolor sit amet，consectetuer adipiscing elit，
 sed diam nonummy nibh。 
< h1>另一文字< / h1> 
< p> euismod tincidunt ut laoreet dolore magna aliquam erat volutpat。 U wis en&&< / p> 
  

正如您所看到的， h2 之后的第一个文本没有任何标签。

我应该添加什么条件来选择那些没有标签的文本？

您可以使用 contents（），而不是使用> children（）来获得文本节点。





文本节点有一个 nodeType 3 。

以下是几个例子：

http://jsfiddle.net/A2Lyx/

以下是如何更改代码的方法：

pre $ 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 （$（row）.is（h3））{
） elements = elements.concat（< h3>+（$（row）.text（））+< / h3>）;
} else if（$（row）.is（p ））{
elements = elements.concat（< p> + $（row）.text（）+< / p>）;
}
}） ;

返回元素;
}

I made the following function to parse all child elements from a class:

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

That function does what I want for this kind of 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>

But I cann't get the full text when the HTML comes this way:

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

As you can see, the first text after the h2 has not any tag.

What condition should I add to my function to select those kind of text without tag too?

Thanks in advance!

解决方案

You can use contents() instead of children() to get text nodes.

Text nodes have a nodeType of 3.

Here are a few examples:

http://jsfiddle.net/A2Lyx/

Here's how you could change your code:

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

这篇关于如何从jQuery中的类中选择没有标签的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！