带XML的jQuery菜单

Question

说实话，我还没有使用jQuery的XML。

我有一点XML（如下图）：

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

，我想填充HTML中（如下图）这个命令：

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

，我想里面浏览... 我已经理解如何加载XML，但我不知道如何将标题文本放在标签内。 然后当你进入“我的照片”...如何看到孩子的内容...

在此先感谢您的帮助。

编辑：

这里jQuery的（下图）：

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

      }); 
     } 
    }); 

但不工作...

Answer 1

只要使用XML作为与负载功能的数据类型，因为我认为这是你走的路。然后你必须循环你的顶级文件夹。但首先，你的XML应该是这样的：

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

为什么你使用标题？您应该使用：文字

然后使用每个循环您的文件夹：

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

，并在那里你可以检查是否有一个子文件夹：

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

而得到从项目文本简单地说：

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

从这开始，你会好起来的，如果你失败了，就回到这里。并记住说什么是不工作，而不是工作...

编辑：而在你的代码中，你一次又一次地更换该跨度的内容。 EDIT2：这是你应该如何添加您的物品：

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

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