JQuery的。递归地解析XML子项。怎么样?

时间:2011-10-17 13:48:42

标签: jquery xml

我一直试图找到一个关于如何解析以下XML文档的示例。下面的示例显示了我正在查看的深度。

我想我需要以下内容:

1。加载XML的函数。

$.get('getProfile.xml', null, function (data) {
    // ...
}, 'xml');

2。循环通过根节点查找子节点的方法。对于找到的每个子节点,遍历找到的子节点的子节点,寻找子节点的新子节点。如果没有找到,只需输出此子节点内的内容。

<?xml version="1.0" encoding="utf-8"?>
<GetProfile>
    <UserInfo>
        <id>free2rhyme</id>
        <name>jerry mcguire</name>
        <age>29</age>
        <sex>m</sex>
        <location>salt lake city, utah</location>
        <signup>00/00/0000</signup>
    </UserInfo>
    <Entry>
        <id>13579</id>
        <date>2011-01-24</date>
        <time>9:34:21</time>
        <title>my first jounal entry</title>
        <body>&lt;![CDATA[i'm really excited to have signed up for myjournal.co.cc! Yes!!!]]&gt;</body>
        <Comments>
            <Comment>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <from>otheruser84</from>
                <body>I am glad you really liked the site! Have fun!!</body>
            </Comment>
            <Comment>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <from>otheruser84</from>
                <body>I am glad you really liked the site! Have fun!!</body>
            </Comment>
            <Comment>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <from>otheruser84</from>
                <body>I am glad you really liked the site! Have fun!!</body>
            </Comment>
        </Comments>
    </Entry>
    <Stats>
        <following>40</following>
        <followers>57</followers>
        <entries>158</entries>
        <favorites>15</favorites>
    </Stats>
    <Preview>
        <Entries>
            <Entry>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <title>otheruser84</title>
            </Entry>
            <Entry>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <title>otheruser84</title>
            </Entry>
            <Entry>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <title>otheruser84</title>
            </Entry>
            <Entry>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <title>otheruser84</title>
            </Entry>
            <Entry>
                <id>97531</id>
                <date>2011-02-16</date>
                <time>9:34:21</time>
                <title>otheruser84</title>
            </Entry>
        </Entries>
    </Preview>
</GetProfile>

第3。上面的示例有希望澄清我想要做的事情。

4。这是一种返回节点索引,名称和值的方法,但它不会检查可能也有自己子节点的子节点。

var getProfile = $(data).find('GetProfile').each(function () {

    $('*', this).each(function (index, event) {
        alert('index=' + index + ' name=' + e.tagName + ' value=' + $(e).text());
    });

});

2 个答案:

答案 0 :(得分:3)

This page提供了一个递归遍历XML DOM的片段:

function traverse(tree) {
    if (tree.hasChildNodes()) {
        document.write('<ul><li>');
        document.write('<b>' + tree.tagName + ' : </b>');
        var nodes = tree.childNodes.length;
        for (var i = 0; i < tree.childNodes.length; i++)
        traverse(tree.childNodes(i));
        document.write('</li></ul>');
    } else document.write(tree.text);
}

另一种方法是使用DOM解析器(例如window.DOMParserActiveXObject("Microsoft.XMLDOM"))来解析XML字符串:

if (window.DOMParser) {
    parser = new DOMParser();
    xmlDoc = parser.parseFromString(text, "text/xml");
} 
else { // Internet Explorer
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = "false";
    xmlDoc.loadXML(text);
}

请参阅此页:http://www.w3schools.com/dom/dom_parser.asp


修改

function traverse(tree) {
    $(tree).contents().each(function() {
        if (this.nodeType == 3) { // text node
            // node value: $(this).text() or this.nodeValue
            console.log('text node value: '+ $(this).text());

        } else {
            console.log('tag name: ' + this.nodeName);
            traverse(this);
        }
    });
}

请参阅此操作:http://jsfiddle.net/william/uKGHJ/1/

答案 1 :(得分:0)

你可以使用这样的东西。

$(xml).find("Entry").each(function () {  

    alert($(this).find("id").text())

    $(this).find("Comments").each(function () {
        $(this).find("Comment").each(function () {
            alert($(this).find("id").text())
            alert($(this).find("date").text())
            alert($(this).find("time").text())
        });
    });
});