Question

Context

I have a tree view with folders and files:

Additional info

• All files and folders are draggable and droppable.
• Folders have .pft-directory generic class and #/folder1/folder2/etc id.
• Files have .pft-file generic class and files/folder1/folder2/etc/fileName.ext href.
• Files and empty folders are <li><a>text of file/folder</a><li>.
• !empty folders have in addition <ul><li><a>text of subfolder</a></li>...etc...</ul>.

Issue

After each drag and drop, I update folder’s id and file’s href. Obviously it becomes more complicated when a folder isn’t empty and there has several iterations of subfolders. I wrote 2 iterations (see the following code).

Question

Can you help me to write a DOM recursive reading function?

Code

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

Personally, I can’t help you with the draggable part, but with regards to the recursive function you might find something like the following useful.

I also had to assume what your HTML looks like based on the description you gave (some HTML would be real handy in these types of questions).

You can see it in action at the following jsFiddle. (If using Firefox, select everything on the Results pane, right-click and view selection source to see the updated attributes)

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

    });                         
}