Javascript jquery中无序列表的多级xml_Javascript_Jquery

Javascript jquery中无序列表的多级xml

javascript jquery

Javascript jquery中无序列表的多级xml,javascript,jquery,Javascript,Jquery,我正在竭尽全力尝试从xml文件创建一个无序列表，但到目前为止运气都不好。我知道如何处理来自jQuery的xml，但我不知道如何创建多级无序列表以下是我迄今为止所取得的成就 xml文件 <?xml version="1.0" encoding="utf-8"?> <Parent>Director <Children>Exe Director1</Children> <Children>Exe Director2</

我正在竭尽全力尝试从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>


经理
Exe Director1
Exe Director2
Exe Director2
副主任1
副主任2
副主任3
摄影师1
摄影师2

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>


无标题文件
风险值水平；
$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“test.xml”，
数据类型：“xml”，
成功：xmlParser
});
});
函数xmlParser（xml）
{
$（xml）.find（“子项”）.each（函数（）
{ 
var text=$（this.text（）；
});
}

这是预期的列表

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


Exe Director1
Exe Director2

副主任1
副主任2

摄影师1
摄影师2

你们能帮帮我吗

编辑：


无标题文件
风险值水平；
$（文档）.ready（函数（）
{
$.ajax({
键入：“获取”，
url:“test.xml”，
数据类型：“xml”，
成功：函数（xml）{xmlParser（$（xml））；}
});
});
函数xmlParser（xml）{
//警报（$（xml.contents（））；
var$ul=$（“”）；//为每个父级创建一个
$（xml）.contents（）.each（函数（i，el）{
if（el.nodeType==3）返回true；
if（el.nodeName.toUpperCase（）=“子项”）
{
$（“”）.text（$（el.text（））.appendTo（$ul）；//Append子项
}否则
{
$ul.append（xmlParser（$（el））；//递归地追加另一个父级
}
//$（“#ListContainer”）。追加（$ul）；
});
//警报（$ul.html（））；
$（“#ListContainer”）。追加（$ul）；
}

递归地构造无序列表：

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

生成的HTML将是：

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

首先，更改

success:xmlParser

语法

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

@Bergi我知道我需要迭代

子项

来创建列表。但是要递归地创建列表，我需要对

父项（“父项”）

采取行动吗？我对jQuery的了解非常有限。对不起，这不是一个jQuery问题，而是一个标准编程问题。您也可以（而且应该？）在不使用jQuery的情况下解决它。尝试迭代DOM树，而不是一次迭代所有元素（一种类型）。Silva:the$xml.contents（）抛出了一个错误：（Uncaught TypeError:Object#没有方法“contents”@harsha:Pass一个jQuery对象给函数，使用

success:function（xml）{xmlParser（$（xml））；}

@Silva：谢谢你的帮助。但是我无法获得正确格式的列表。现在发生的事情是，正在创建单个列表而不是嵌套列表。我正在更新这里的最新代码。请看一下。

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

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

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