使用jQuery将多级XML转换为无序列表

Question

使用jQuery将多级XML转换为无序列表

5

我正在拼命地尝试从一个没有成功的xml文件中创建无序列表。我知道如何使用jQuery处理xml，但是我无法弄清楚如何制作多级无序列表。

到目前为止，这是我所取得的成就。

xml文件：

<?xml version="1.0" encoding="utf-8"?>
<Parent>Director
    <Children>Exe Director1</Children>
    <Children>Exe Director2</Children>
    <Parent>Exe Director2
        <Children>Sub Director 1</Children>
        <Children>Sub Director 2</Children>
        <Parent>Sub Director 3
            <Children>Cameraman 1</Children>
            <Children>Cameraman 2</Children>
        </Parent>
    </Parent>    
</Parent>

HTML文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var levels;
    $(document).ready(function() 
    {
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: xmlParser
        });
    });
    function xmlParser(xml)
{
    $(xml).find("Children").each(function()
    { 
        var text = $(this).text();
    });
}
</script>
</head>
<body>
    <div id="ListContainer"></div>
</body>
</html>

这是预期的列表

<ul>
    <li>Exe Director1</li>
    <li>Exe Director2</li>
    <ul>
        <li>Sub Director 1</li>
        <li>Sub Director 2</li>
        <ul>
            <li>Cameraman 1</li>
            <li>Cameraman 2</li>
        </ul>
    </ul>
</ul>

Can you guys please help me out!

Edit:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var levels;
    $(document).ready(function() 
    {
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: function (xml) { xmlParser($(xml)); }
        });
    });
    function xmlParser(xml) {
        //alert($(xml).contents());  
        var $ul = $("<ul>"); // For each Parent, create an <ul>
        $(xml).contents().each(function (i, el) {
            if (el.nodeType == 3) return true;
            if (el.nodeName.toUpperCase() == "CHILDREN") 
            {
               $("<li>").text($(el).text()).appendTo($ul); // Append <li> Children
            } else 
            {
               $ul.append(xmlParser($(el))); // Recursively append the other Parent
            }
            //$("#ListContainer").append($ul);
        });
        //alert($ul.html());
        $("#ListContainer").append($ul);
    }
</script>
</head>
<body>
    <div id="ListContainer"></div>
</body>
</html>

- Harsha Venkatram

@Bergi 我明白我需要遍历Children来创建列表。但是要递归地执行此操作，我需要对parents("Parent")进行操作吗？我的jQuery知识非常有限。抱歉。 - Harsha Venkataramu

这不是jQuery的问题，而是标准编程问题。你可以（而且应该？）不使用jQuery解决它。尝试迭代DOM 树，而不是一次性处理所有元素（同一类型）。 - Bergi

2个回答

2

首先，更改success: xmlParser语法。

success: function(data){
    xmlParser(data)
}

- Krishna Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- João Silva · Accepted Answer

递归构建无序列表：

function xmlParser($xml) {   
    var $ul = $("<ul>"); // For each Parent, create an <ul>
    $xml.contents().each(function (i, el) {
        if (el.nodeType == 3) return true;
        if (el.nodeName.toUpperCase() == "CHILDREN") {
           $("<li>").text($(el).text()).appendTo($ul); // Append <li> Children
        } else {
           $ul.append(xmlParser($(el))); // Recursively append the other Parent
        }
    });
    return $ul;
}

这是一个演示：DEMO。将每个组的Parent和对应的Children视为单独的单位。例如，如果您的XML如下所示：

<Parent>Director
    <Children>Exe Director1</Children>
    <Children>Exe Director2</Children>
</Parent>

生成的HTML代码如下所示：

<ul>
    <li>Exe Director1</li>
    <li>Exe Director2</li>
</ul>

你该如何构建这个呢？很简单：创建一个 <ul> 元素，然后对于每个 Children，将一个 <li> 元素附加到它上面。现在，对于递归部分，当你引入另一个 Parent 时，你只需再次创建另一个 <ul>，就好像它是一个单独的单位一样，并将其结果附加到 parent 的 <ul> 上。

请注意，我上面使用的函数需要传递一个 jQuery 对象作为参数，因此你需要更改你的 success 处理程序：

success: function (xml) {
  xmlParser($(xml));
}