créer une liste non ordonnée avec jquery en utilisant xml

J'ai un fichier xml que je veux convertir en une liste non ordonnée en utilisant jquery. Jusqu'à présent, j'ai réussi à faire fonctionner la liste, sauf pour le troisième niveau du XML. Actuellement, mon code écrit tous les éléments enfants de 'Navigation_sub_3'. Ce que je suis en train de comprendre comment écrire uniquement les nœuds enfants qui sont level_2, de sorte que la sortie seraitcréer une liste non ordonnée avec jquery en utilisant xml

Strategy 
    Views 
    IBM 
    etc. 

UML 
    Development 
    Architecure 
    etc 

Platform 
    Model 
    BPEL 
    OSLO 
    etc 
    Service 
    Google 
    Live 
    etc.

est Ci-dessous mon fichier html/jquery et xml. Quelqu'un peut-il m'aider comment afficher le 3ème niveau?

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

Source

2009-05-19 Chris

Avez-vous essayé d'utiliser une récursivité? Vous pouvez écrire une fonction javascript appelée writeSection. Cette fonction écrirait chaque nœud dans une section et si un nœud a des enfants, il s'appellerait lui-même pour écrire ces enfants.

Source

2009-05-19 13:26:38 Keltex

Salut Keltex, merci pour la suggestion, je l'ai eu travailler avec un autre pour chaque boucle dans la section de niveau deux .. Cheers, Chris – Chris

créer une liste non ordonnée avec jquery en utilisant xml

Répondre

Questions connexes