多级xml到jquery中的无序列表

Question

I am pulling my hair out trying to create an unordered list from an xml file with no luck so far.I know how to process the xml from jQuery but I am not able to figure out how to make the multi-level unordered list. 我正在试着从xml文件中创建一个无序列表，目前为止没有运气。我知道如何从jQuery处理xml，但我无法弄清楚如何制作多级无序列表。

Here is what I have achieved so far. 这是我迄今取得的成就。

The xml file 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>

The html file 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>

This is the expected list 这是预期的清单

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

Answer 1

Recursively construct the unordered list: 递归构造无序列表：

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

Here's a DEMO . 这是一个演示。 Think of each group Parent and respective Children as a separate unit. 将每组Parent和各自的Children视为一个单独的单位。 For example, if your XML looked like the following: 例如，如果您的XML看起来如下所示：

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

The resulting HTML would be: 生成的HTML将是：

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

How would you construct this? 你会如何构建这个？ It's quite simple: create an <ul> element, and for each Children append a <li> element to it. 这很简单：创建一个<ul>元素，并为每个Children添加一个<li>元素。 Now, for the recursive part, when you introduce another Parent , you simply create another <ul> again is if it were a single unit, and append its result to the parent <ul> . 现在，对于递归部分，当您引入另一个Parent ，只需创建另一个<ul> ，如果它是一个单元，并将其结果附加到父 <ul> 。

Note that the function that I've used above requires a jQuery object to passed as an argument, thus you'd need to change your success handler: 请注意，我上面使用的函数需要将jQuery对象作为参数传递，因此您需要更改success处理程序：

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

Answer 2

first, change the success: xmlParser syntax, 首先，改变success: xmlParser语法，

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

多级xml到jquery中的无序列表

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-09-29 16:41:02

解决方案2
2 2012-09-29 16:41:13

多级xml到jquery中的无序列表

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-09-29 16:41:02

解决方案2 2 2012-09-29 16:41:13

解决方案1
5 已采纳 2012-09-29 16:41:02

解决方案2
2 2012-09-29 16:41:13