gpt4 book ai didi

javascript - 多级 xml 到 jquery 中的无序列表

转载 作者:数据小太阳 更新时间:2023-10-29 06:07:35 25 4
gpt4 key购买 nike

我正在努力尝试从一个 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>

你们能帮帮我吗!

编辑:

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

最佳答案

递归构造无序列表:

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

关于javascript - 多级 xml 到 jquery 中的无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12654317/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com