Javascript 使用jquery使用xml创建无序列表
我有一个xml文件，我想使用jquery将其转换为无序列表。 到目前为止，除了第三层xml之外，我成功地使列表正常工作。当前我的代码写入“导航”子项3的所有子项。 我想弄明白的是，如何只写第2层的子节点，这样输出就会Javascript 使用jquery使用xml创建无序列表,javascript,jquery,xml,Javascript,Jquery,Xml,我有一个xml文件，我想使用jquery将其转换为无序列表。 到目前为止，除了第三层xml之外，我成功地使列表正常工作。当前我的代码写入“导航”子项3的所有子项。 我想弄明白的是，如何只写第2层的子节点，这样输出就会 Strategy Views IBM etc. UML Development Architecure etc Platform Model BPEL OSLO etc Service Goog
Strategy
Views
IBM
etc.
UML
Development
Architecure
etc
Platform
Model
BPEL
OSLO
etc
Service
Google
Live
etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function XmlOnLoad(xmlData, strStatus)
{
var jData = $(xmlData);
var jccNav = jData.find("Navigation");
var jSections = jccNav.children();
var jList = $("#Navi");
jSections.each(function(intSectionIndex)
{
var jSection = $(this);
var jTerm = $("<li></li>");
var jDef2 = $("<ul></ul>");
var jLevel2 = $("<b></b>");
var jLevel3 = $("<b></b>");
jSection.children().children().each(function(intPartIndex)
{
var jPart3 = $(this);
var jText3 = $("<li></li>");
// Set the li text.
jText3.html("<a>" + jPart3.attr("tooltip") + "3.level</a>");
// Append to list.
jLevel3.append(jText3);
});
jSection.children().each(function(intPartIndex)
{
var jPart2 = $(this);
var jText2 = $("<li></li>");
// Set the li text.
jText2.html("<a>" + jPart2.attr("tooltip") + " 2.level </a><ul>" + jLevel3.html());
// Append to list.
jLevel2.append(jText2);
});
jTerm.html("<a>"
+ $(this).attr("tooltip")
+ "1.ebene</a>"
+ "<ul>"
+ jLevel2.html()
);
jList.append(jTerm);
$("#homer").html(jList.html());
});
};
$(document).ready(function()
{
$.get("content.xml", {}, XmlOnLoad);
});
</script>
</head>
<body>
<div id="homer"></div>
</body>
</html>
函数XmlOnLoad（xmlData，strStatus）
{
var jData=$（xmlData）；
var jccNav=jData.find（“导航”）；
var jSections=jccNav.children（）；
var jList=$（“#Navi”）；
jssections.each（函数（intSectionIndex）
{
var jSection=$（此项）；
var jTerm=$（“”）；
var jDef2=$（“
”）；
变量jLevel2=$（“”）；
变量jLevel3=$（“”）；
jssection.children（）.children（）.each（函数（intPartIndex）
{
var jPart3=$（本）；
var jText3=$（“”）；
//设置li文本。
html（“+jPart3.attr（“工具提示”）+“3.level”）；
//附加到列表中。
jLevel3.append（jText3）；
});
jssection.children（）.each（函数（intPartIndex）
{
var jPart2=$（本）；
var jText2=$（“”）；
//设置li文本。
html（“+jPart2.attr（“工具提示”）+“2.level”+jLevel3.html（））；
//附加到列表中。
jLevel2.append（jText2）；
});
html（“”）
+$（this.attr（“工具提示”）
+“1.埃本”
+“”
+jLevel2.html（）
);
jList.append（jTerm）；
$（“#homer”）.html（jList.html（））；
});
};
$（文档）.ready（函数（）
{
$.get（“content.xml”，{}，XmlOnLoad）；
});
<?xml version="1.0" encoding="utf-8"?>
<Navigation>
<Navigation_sub_1 tooltip="Strategy">
<!--1 Button-->
<level_2 name="Nav1" number="5" tooltip="Views">
<level_3 name="Nav1_5" number="15" tooltip="IBM" />
<level_3 name="Nav1_5" number="13" tooltip="Mainframe" />
<level_3 name="Nav1_5" number="7" tooltip="Novell" />
<level_3 name="Nav1_5" number="6" tooltip="Open- Source"/>
<level_3 name="Nav1_5" number="1" tooltip="Oracle" />
<level_3 name="Nav1_5" number="9" tooltip="SAP" />
<level_3 name="Nav1_5" number="8" tooltip="Sun" />
</level_2>
</Navigation_sub_1>
<!--2 Button-->
<Navigation_sub_2 tooltip="UML">
<level_2 name="Nav2" number="5" tooltip="Development">
<level_3 name="Nav2_5" number="10" tooltip="Architecture"/>
<level_3 name="Nav2_5" number="6" tooltip="Patterns" />
<level_3 name="Nav2_5" number="1" tooltip="SOA" />
</level_2>
</Navigation_sub_2 >
<!--3 Button-->
<Navigation_sub_3 tooltip="Platform">
<level_2 name="Nav3" number="1" tooltip="Model">
<level_3 name="Nav3_1" number="15" tooltip="BPEL" />
<level_3 name="Nav3_1" number="9" tooltip="BPMN" />
<level_3 name="Nav3_1" number="7" tooltip="DSL" />
<level_3 name="Nav3_1" number="10" tooltip="Oslo" />
<level_3 name="Nav3_1" number="1" tooltip="UML" />
</level_2>
<level_2 name="Nav3" number="7" tooltip="Service" >
<level_3 name="Nav3_7" number="3" tooltip="Azure Services" />
<level_3 name="Nav3_7" number="11" tooltip="ISB" />
<level_3 name="Nav3_7" number="6" tooltip="Live" />
<level_3 name="Nav3_7" number="8" tooltip="Live Mesh" />
<level_3 name="Nav3_7" number="13" tooltip="REST" />
<level_3 name="Nav3_7" number="9" tooltip="Web- services" />
<level_3 name="Nav3_7" number="1" tooltip="Windows Azure" />
</level_2>
</Navigation_sub_3>
</Navigation>
writeSectionwriteSection