树视图递归更新

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); 
     } 

    });       
}