jQuery的Ajax響應，遍歷XML構建嵌套菜單樹

Question

我要瘋了試圖找出了這一點，我想建立多層次

RootFolder 
- First Sub Folder 
-- First Sub Sub Folder 
--- First Sub Sub Sub Folder 
--- First Sub Sub Sub Sub Folder 
- Second Sub Folder 
- Second Sub Sub Folder 

我的XML是非常簡單的一個簡單的菜單樹（不正確的值）

<OrgFolderDetails> 
    <FolderName>Main Folder</FolderName> 
    <TheChildren> 
     <OrgFolderDetails> 
      <FolderName>First Sub Folder</FolderName> 
      <TheChildren> 
       <OrgFolderDetails> 
        <FolderName>First Sub Sub Folder</FolderName> 
        <TheChildren> 
         <OrgFolderDetails> 
          <FolderName>First Sub Siub Sub Folder</FolderName> 
          <TheChildren> 
           <OrgFolderDetails> 
            <FolderName>First Sub Sub Sub Sub Folder</FolderName> 
            <TheChildren/> 
           </OrgFolderDetails> 
          </TheChildren> 
         </OrgFolderDetails> 
        </TheChildren> 
       </OrgFolderDetails> 
      </TheChildren> 
     </OrgFolderDetails> 
     <OrgFolderDetails> 
      <FolderName>Second Sub Folder</FolderName> 
      <TheChildren> 
       <OrgFolderDetails> 
        <FolderName>Second Sub Sub Folder</FolderName> 
        <TheChildren/> 
       </OrgFolderDetails> 
      </TheChildren> 
     </OrgFolderDetails> 
    </TheChildren> 
</OrgFolderDetails> 

我已經使用jQuery的.filter（）和。 find（）each（）沒有任何成功，它不會給我很好的破折號來表示我在哪個級別，它只是吐出文件夾名稱。

我的代碼遍歷

$(data).find("FolderName").each(function(){ 
      var folderName = $(this).text(); 

      $("#folderLevels").append(folderName+"<br/>"); 
     }); 

Answer 1

好了，從我的理解，我們需要建立一個菜單，有一定數量的前破折號，取決於孩子的水平。 幸運的是，jQuery使這種有點容易。

$(data).find("FolderName").each(function(){ 
    var levels = $(this).parents("OrgFolderDetails").size(); 
    var text = $(this).text(); 
    var html = ""; 

    for(var j=0; j < levels; j++){ 
     html += "-";  
    } 
    html += " "+text+"</br>"; //add in that space after the dashes, and the <br> 

    $("#folderLevels").append(html); 
}); 

希望有所幫助。這方面的主要幫手是parents()方法。 http://api.jquery.com/parents

Answer 2

我想你會想爲此使用遞歸函數。

var s = getNestedString($(data), 0); 

function getNestedString(d, level) { 
    // get the name of current node 
    var s = d.children("FolderName").text() + "<br/>"; 

    // prepend with dashes for inner levels 
    for (var i=0 ; i<level ; i++) { 
     s = "-" + s; 
    } 

    // get children and call this function recursively (incrementing level) 
    var ch = d.children("TheChildren").children("OrgFolderDetails"); 
    for (var i=0 ; i < ch.length ; i++) { 
     s = s + getNestedString(ch[i], level+1); 
    } 

    // return string for current and nested nodes 
    return s; 
}