帶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');