Response title
This is preview!
Can't figure out how to traverse XML recursively
in Using jQuery
•
12 years ago
Hi!
I'm trying to use an existing XML file as a basis for a drop-down menu, using a recursive function that traverses the XML and re-creates the structure as a series of UL and LI tags.
The actual recursiveness of the code works, in the sense that it will go through all of my structure and create the child ULs along with the correct LI tags for each item.
The problem is, it doubles-up everything - when it finishes traversing the child structure using the recursive function, it goes through it again, thinking it's on the same level. This means my structure contains all elements at the root, as well as the "correct" structure under it (well, child elements that contain their own child have the same issue, you get the picture).
I've googled around and I can't seem to find a single fully functional example of a recursively traversing an XML file to create a menu. So I'm asking here since I use jQuery to do it.
I may have a hint on the solution but haven't been able to figure it out. I'm using $(xml).find('TocEntry').each(processXML); as code to find all the elements. I think this may be what's causing my issue that it's showing every elements, because child elements also have the same name, TocEntry. I tried using children() instead of find('TocEntry') but it doesn't show anything in my menu - either it doesn't work, or it doesn't pass on the information to the function in the same way... I'm not sure.
The JS code is here:
http://dpaste.org/2QNN/
The XML looks like this:
I'm trying to use an existing XML file as a basis for a drop-down menu, using a recursive function that traverses the XML and re-creates the structure as a series of UL and LI tags.
The actual recursiveness of the code works, in the sense that it will go through all of my structure and create the child ULs along with the correct LI tags for each item.
The problem is, it doubles-up everything - when it finishes traversing the child structure using the recursive function, it goes through it again, thinking it's on the same level. This means my structure contains all elements at the root, as well as the "correct" structure under it (well, child elements that contain their own child have the same issue, you get the picture).
I've googled around and I can't seem to find a single fully functional example of a recursively traversing an XML file to create a menu. So I'm asking here since I use jQuery to do it.
I may have a hint on the solution but haven't been able to figure it out. I'm using $(xml).find('TocEntry').each(processXML); as code to find all the elements. I think this may be what's causing my issue that it's showing every elements, because child elements also have the same name, TocEntry. I tried using children() instead of find('TocEntry') but it doesn't show anything in my menu - either it doesn't work, or it doesn't pass on the information to the function in the same way... I'm not sure.
The JS code is here:
http://dpaste.org/2QNN/
The XML looks like this:
- <?xml version="1.0" encoding="utf-8"?>
- <CatapultToc Version="1" DescendantCount="56">
- <TocEntry Title="Start Topic" Link="/Content/start.html" ComputedFirstTopic="true" DescendantCount="0" />
- <TocEntry Title="Has Child" Link="/Content/haschild.html" StartChapter="true" PageNumberReset="continue" PageNumber="1" StartSection="false" ComputedResetPageLayout="true" ComputedFirstTopic="false" DescendantCount="1">
- <TocEntry Title="Single Child" Link="/Content/singlechild.html" ComputedFirstTopic="false" DescendantCount="0" />
- </TocEntry>
- <TocEntry Title="Has Child Struct" ComputedFirstTopic="false" DescendantCount="23">
- <TocEntry Title="Has Child Sub-Struct" Link="/Content/haschildsubstruct.html" ComputedFirstTopic="false" DescendantCount="1">
- <TocEntry Title="3rd Level Menu" Link="/Content/3rdlevel.html" ComputedFirstTopic="false" DescendantCount="0" />
- </TocEntry>
- <TocEntry Title="After Child Struct" Link="/Content/afterchildstruct.html" ComputedFirstTopic="false" DescendantCount="0" />
- </TocEntry>
- <TocEntry Title="Last Item" Link="/Content/lastitem.html" ComputedFirstTopic="false" DescendantCount="0" />
- </CatapultToc>
1