Getting values from a
,
tree format

Question

I've the folloing tree view:

ul {
  list-style-type: none;
}





  
     first_folder
    
       app1.dat
       app2.dat
      
         second_folder
        
           ret.dat

Which generates a folder tree like this:

What I'm loking for is that when I click on any file or folder, get the "full file/folder path". This means:

If I click in app1.dat, my desired output is: first_folder/app1.dat
If I click in second_folder, my desired output is: first_folder/second_folder
If I click in ret.dat, my desired output is: first_folder/second_folder/ret.dat

How can I archieve this? I tried with no luck to get the value:

function getPath() {
    var value = $("#myTreeSelector").val()
    console.log(value)
}

EDIT: The tree can have more than 2 levels, this is just a minified example.

user_387194 · Answer

Here is generic code, all you need to do is add event to li (using event delegation) and use parents to the li elements that are parents of selected li element.

$(function() {
  $('#myTreeSelector').on('click', 'li', function() {
     var item = $(this);
     var path = [];
     if (item.is('.file')) {
        path.push(item.text().trim());
     } else {
        path.push(item.find('> .folder-selector').text().trim() + '/');
     }
     var parents = item.parents('#myTreeSelector li');
     path = parents.map(function() {
        return $(this).find('> .folder-selector').text().trim();
     }).get().reverse().concat(path);
     console.log(path.join('/'));
     return false;
  });
});

ul {
  list-style-type: none;
}





  
     first_folder
    
       app1.dat
       app2.dat
      
         second_folder
        
           ret.dat
           third_folder

Getting values from a <ul>, <li> tree format

1 Answers