Menu jQuery avec XML

Question

Pour être honnête, je n'ai pas encore utilisé XML avec jQuery.

J'ai un peu XML (ci-dessous):

<folder title="Home"> 
    <item title="Welcome" /> 
    <folder title="My Photos"> 
    <folder title="Holidy"> 
     <item title="Photo 1" /> 
     <item title="Photo 2" /> 
     <item title="Photo 3" /> 
     <item title="Photo 4" /> 
     <item title="Photo 5" /> 
    </folder> 
    <folder title="Christmas"> 
     <item title="Photo 1" /> 
     <item title="Photo 2" /> 
     <item title="Photo 3" /> 
     <item title="Photo 4" /> 
     <item title="Photo 5" /> 
     <item title="Photo 6" /> 
     <item title="Photo 7" /> 
     <item title="Photo 8" /> 
    </folder> 
    <folder title="Zoo"> 
     <item title="Photo 1" /> 
     <item title="Photo 2" /> 
     <item title="Photo 3" /> 
     <item title="Photo 4" /> 
    </folder> 
    </folder> 
    <folder title="My Videos"> 
    <item title="Movie 1" /> 
    <item title="Movie 2" /> 
    <item title="Movie 3" /> 
    <item title="Movie 4" /> 
    <item title="Movie 5" /> 
    <item title="Movie 6" /> 
    <item title="Movie 7" /> 
    <item title="Movie 8" /> 
    </folder> 
    <folder title="My Audio"> 
    <folder title="Artist 1"> 
     <folder title="Album 1"> 
     <item title="Track 1" /> 
     <item title="Track 2" /> 
     <item title="Track 3" /> 
     <item title="Track 4" /> 
     <item title="Track 5" /> 
     <item title="Track 6" /> 
     <item title="Track 7" /> 
     </folder> 
     <folder title="Album 2"> 
     <item title="Track 1" /> 
     <item title="Track 2" /> 
     <item title="Track 3" /> 
     <item title="Track 4" /> 
     <item title="Track 5" /> 
     <item title="Track 6" /> 
     <item title="Track 7" /> 
     <item title="Track 8" /> 
     </folder> 
    </folder> 
    <folder title="Artist 2"> 
     <folder title="Album 1"> 
     <item title="Track 1" /> 
     <item title="Track 2" /> 
     <item title="Track 3" /> 
     <item title="Track 4" /> 
     <item title="Track 5" /> 
     <item title="Track 6" /> 
     <item title="Track 7" /> 
     </folder> 
    </folder> 
    <folder title="Podcasts"> 
     <item title="Track 1" /> 
     <item title="Track 2" /> 
     <item title="Track 3" /> 
     <item title="Track 4" /> 
     <item title="Track 5" /> 
     <item title="Track 6" /> 
     <item title="Track 7" /> 
     <item title="Track 8" /> 
    </folder> 
    </folder> 
</folder> 

et je veux remplir le code html dans cet ordre (ci-dessous):

<div class="entry"> 
    <p><span class="links">Sub-directory</span></p> 
    <p><span class="files">File One</span></p> 
    <p><span class="files">File Two</span></p> 
    <p><span class="files">File Three</span></p> 
    <p><spanclass="files">FileFour</span></p> 
    <p><spanclass="files">FileFive</span></p> 
    <p><span class="files">File Six</span></p> 
</div> 

et je veux naviguer à l'intérieur ... J'ai compris comment charger le XML mais je n'ai pas compris comment mettre dans le span TAG le titre du texte. Et quand naveigate dans "Mes photos" ... comment voir le contenu de l'enfant ...

Merci d'avance pour l'aide.

EDIT:

Voici le jQuery (ci-dessous):

$.ajax({ 
     type: "GET", 
     url: "content.xml", 
     dataType: "xml", 
     success: function (xml) { 
      $(xml).find('Home').children().each(function() { 

       var title_text = $(this).attr('title'); 
       var spanFiles = $('span.files'); 

       spanFiles 
        .html(title_text) 
        .appendTo('div.entry'); 

      }); 
     } 
    }); 

mais ne fonctionne pas ...

Answer 1

utiliser juste xml comme type de données avec la fonction de charge, comme je pense était la route que vous avez marché. Ensuite, vous devez boucler votre dossier supérieur. Mais d'abord, votre xml devrait ressembler à ceci:

<folders> 
    <folder> 
     <subfolder> 
      <item></item> 
     </subfolder> 
    </folder> 
</folders> 

Et pourquoi utilisez-vous le titre? Vous devez utiliser: Texte

Utilisez ensuite chaque pour boucler vos dossiers:

$(xml).find('folder').each(function() { 
}); 

Et là, vous pouvez vérifier s'il y a un sous-dossier:

if($(this).find('subfolder').length > 0) { //loop the items from the subfolder } 

Et pour obtenir le texte d'un article simplement:

$(this).find('item').text(); 

Commencez par cela et tout ira bien et revenez ici si vous échouez. Et n'oubliez pas de dire ce qui ne fonctionne pas plutôt que de ne pas fonctionner ...

EDIT: Et dans votre code, vous remplacez le contenu de cette plage encore et encore. EDIT2: Voici comment vous devez ajouter vos articles:

var text = $(this).find('item').text(), 
    $span = $(document.createElement('span')).addClass('files'); 

$span.html(text).appendTo('div.entry');