Create unordered list with jquery using xml
I have an xml file that I want to convert to an unordered list using jquery. so far I've managed to get the list except the third level xml. Currently my code is writing all the children of 'Navigation_sub_3'. I am trying to figure out how to write only child nodes that are in level_2, so the output will be
Strategy
Views
IBM
etc.
UML
Development
Architecure
etc
Platform
Model
BPEL
OSLO
etc
Service
Google
Live
etc.
Below is the html / jquery and xml file. Can anyone help me know how to render the 3rd level?
Cheers Chris
test.html
<!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>
content.xml
<?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>
+1
a source to share