Древовидное представление в JavaScript с рекурсивным обновлением

Question

Контекст

У меня есть древовидное представление с папками и файлами:

Дополнительная информация

• Все файлы и папкиможно перетаскивать и удалять.
• Папки имеют .pft-directory общий класс и #/folder1/folder2/etc идентификатор.
• Файлы имеют .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>.

Проблема

После каждого перетаскивания я обновляю идентификатор папкии файл 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);
        }

    });                         
}