jQuery: Group <a> links based on text value

Question

jQuery noob here - needing some help.

Basically, because Go's html/template output sucks, I'm forced to use more JS (which I suck at!)

I have an ordered, but not grouped list of links, that need grouping into "parent folder" links, by the text value. Like a file/folder tree.

The list is dynamic, but based as follows:

<div id="Files">
<a>file.rb</a>
<a>Somefile.rb</a>
<a>folder</a>
<a>folder/level2</a>
<a>folder/level2/file.js</a>
<a>folder/level2/level3/anotherfile.js</a>
</div>

So files would need to be grouped into their parent folder, and folders grouped recursively by the text in the 'a' element. The parent 'a' would be the 'folder' and the child the 'files' within that folder.

Unfortunately, Folder and File 'a's can't be given separate classes on generation due to the underlying Go script. The output is just a fully expanded directory of folders / files in ordered, but not grouped links.

RE: comment below: The example desired output is something like the following:

http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/

I understand this could mean splitting the files/folders into ul/li lists, but I'm fine with that. It's the detection of file vs folder & folder level from the link text I am struggling with.

Any help is MUCH appreciated! Thanks! :)

Answer 1

Is this what you're looking for?

http://jsfiddle.net/6hWsK/

$(document).ready(function(){
    var aList = $('#Files > a');
    var fileList = [];
    $.each($('#Files > a'), function(i, obj){
        fileList.push($(obj).html());
    });

    var tree = GetNodeTree(fileList);
    console.log(tree);
    var html = DrawMenu(tree, "http://www.google.nl");
    console.log(html);
    $('#Files').html(html);
});

function GetNodeTree(fileList){
    if(fileList.length === 0){
        return [];
    }
    var childTree = [];
    $.each(fileList, function(i, path){
        var nodeNames = path.split("/");
        if(childTree[nodeNames[0]]===undefined){
            childTree[nodeNames[0]] = [];
            childTree[nodeNames[0]]['files'] = [];
        }
        if(nodeNames.length>1){
            var childPath = nodeNames.slice(1).join("/");
            childTree[nodeNames[0]]['files'].push(childPath);
        }
    });
    for(var key in childTree) {
        childTree[key]['name'] = key;
        childTree[key]['files'] = GetNodeTree(childTree[key]['files']);
    }
    return childTree;
}

function DrawMenu(tree, basepath){
    var elements = "";
    for(var key in tree) {
        var node = tree[key];
        var path = basepath + "/" + node['name'];
        var childMenu = DrawMenu(node['files'], path);
        elements += $('<div><li><a href="'+ path + '">' + node['name'] + childMenu + '</a></li></div>').html();
    }
    if(elements.length>0){
        elements = '<ul>'+elements+'</ul>';
    }
    return $('<div>'+elements+'</div>').html();
}