樹視圖遞歸更新

Question

語境

我有一個文件夾和文件樹視圖：

其他信息

• 所有文件和文件夾可以拖動和投擲的。
• 文件夾有.pft-directory通用類和#/folder1/folder2/etc ID。
• 文件有.pft-file泛型類和files/folder1/folder2/etc/fileName.ext href。
• 文件和空文件夾是<li><a>text of file/folder</a><li>。
• ！空文件夾另外還有<ul><li><a>text of subfolder</a></li>...etc...</ul>。

問題

每個拖放後，我更新的文件夾的ID和文件的href。顯然，當一個文件夾不是空的時候變得更加複雜，並且有多個子文件夾迭代。我寫了2次迭代（請參見下面的代碼）。

問題

你能幫我寫一個DOM遞歸閱讀功能？

代碼

jquery：

//the first folder 
ui.draggable.find('a.pft-directory:first').attr('id', $path_Ite1); 

//inside the first folder... 

ui.draggable.find('ul:first > li > a').each(function() { 
    var $this_Ite1 = $(this); 

    //if file, else folder  

    if ($this_Ite1.hasClass('pft-file')) { 
     $this_Ite1.attr('href', 'files' + $path_Ite1 + '/' + $this_Ite1.text()); 
    } 
    else { 
     var $path_Ite2 = $path_Ite1 + '/' + $this_Ite1.text(); 
     $this_Ite1.attr('id', $path_Ite2); 

     //inside the second folder... 

     $this_Ite1.parent().find('ul:first > li > a').each(function() { 
      var $this_Ite2 = $(this); 

      if ($this_Ite2.hasClass('pft-file')) { 
       $this_Ite2.attr('href', 'files' + $path_Ite2 + '/' + $this_Ite2.text()); 
      } 
      else { 
       var $path_Ite3 = $path_Ite2 + '/' + $this_Ite2.text(); 
       $this_Ite2.attr('id', $path_Ite3); 

       //inside the third folder etc... 

      } 
     }); 
    } 
}); 

Answer 1

就個人而言，我不能幫你用拖動的一部分，但關於遞歸函數您可能會發現類似下面有用。

我也不得不承擔起你的HTML是什麼樣子根據您所提供（一些HTML將在這些類型的問題，真正方便）的說明。

您可以在以下jsFiddle處看到它的實際應用。 （如果使用的是Firefox，請在結果窗格中的一切，用鼠標右鍵單擊和視圖選擇源看到更新的屬性）

HTML：

<ul> 
    <li> 
     <a class="ptf-directory">Folder1</a> 
     <ul> 
      <li> 
       <a class="ptf-directory">Folder3</a> 
       <ul> 
        <li> 
         <a class="ptf-file">File4.txt</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a class="ptf-file">File1.txt</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a class="ptf-directory">Folder2</a> 
    </li> 
    <li> 
     <a class="ptf-file">File2.txt</a> 
    </li>  
    <li> 
     <a class="ptf-file">File3.txt</a> 
    </li> 
</ul> 

JQuery的：

$(function(){ 
    UpdateFolderItems($('ul:first'), ''); 
}); 

function UpdateFolderItems(folder, basePath) 
{ 
    // go through folder contents 
    folder.children('li').each(function(){ 

     // get item 
     var item = $(this).children('a'); 

     // generate new path for item 
     var newPath = basePath + '/' + item.text(); 

     // if item is a folder 
     if (item.hasClass('ptf-directory')) 
     { 
      // update id on folder 
      item.attr('id', newPath); 

      // if folder content exists 
      var folderContent = $(this).children('ul:first'); 
      if (folderContent.length > 0) 
      { 
       // update folder content 
       UpdateFolderItems(folderContent, newPath); 
      } 
     } 

     // if item is a file 
     else if (item.hasClass('ptf-file')) 
     { 
      // update href on file 
      item.attr('href', newPath); 
     } 

    });       
}