jQuery Menü mit XML

Question

Um ehrlich zu sein, ich habe noch nicht XML mit jQuery verwendet.

Ich habe eine kleine XML (unten):

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

und ich möchte die HTML in dieser Reihenfolge füllen (siehe unten):

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

und ich möchte nach innen navigieren ... Ich habe verstanden, wie man die XML lädt, aber ich habe nicht verstanden, wie man innerhalb der Spannweite TAG den Titeltext setzt. Und wenn navegate in "Meine Fotos" ... wie man den Kindinhalt sieht ...

Vielen Dank im Voraus für die Hilfe.

EDIT:

Hier ist die jQuery (unten):

$.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'); 

      }); 
     } 
    }); 

aber nicht funktioniert ...

Answer 1

Nur xml als Datentyp mit der Ladefunktion verwenden, da denke ich, war die Straße, die du gegangen bist. Dann müssen Sie Ihren obersten Ordner loopen. Aber zuerst sollte Ihr XML so sein:

Und warum verwenden Sie Titel? Sie sollten verwenden: Text

dann jeweils Ihre Ordner-Schleife verwenden:

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

Und dort können Sie überprüfen, ob es ein Unterordner:

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

und den Text von einem Elemente zu erhalten einfach:

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

Beginnen Sie damit und Sie werden gut und erhalten Sie hier zurück, wenn Sie versagen. Und denken Sie daran zu sagen, was nicht funktioniert, anstatt nicht zu funktionieren ...

EDIT: Und in Ihrem Code ersetzen Sie den Inhalt dieser Spanne immer und immer wieder. EDIT2: Dies ist, wie Sie Ihre Artikel anhängen soll:

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

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