jQuery：从多个父级检索属性并将它们存储到单个数组中

Question

I have an HTML list structure generated with PHP that simulates the structure of my directory.

If my directory looks like this…

• folder A
    — file A-1
    — file A-2
    • folder A-A
        — file A-A-1
        — file A-A-2
• folder B
    — file B-1
    • folder B-A
        — file B-A-1
    — file B-2

my HTML looks this way:

<h2 data-url="folder_A">folder A</>
<ul>
    <li data-url="file_A-1">file A-1</li>
    <li data-url="file_A-2">file A-2</li>
    <h2 data-url="folder_A-A">folder A-A</h2>
    <ul>
        <li data-url="file_A-A-1">file A-A-1</li>
        <li data-url="file_A-A-2">file A-A-2</li>
    </ul>
</ul>
<h2 data-url="folder_B">folder B</>
<ul>
    <li data-url="file_B-1">file B-1</li>
    <h2 data-url="folder_B-A">folder B-A</h2>
    <ul>
        <li data-url="file_B-A-1">file B-A-1</li>
    </ul>
    <li data-url="file_B-2">file B-2</li>
</ul>

What I want to achieve is to rebuild the complete URL of a <li> file when you click on it, from the data-url of its parent elements.

For example, the complete URL of the file BA-1 is folder_B/folder_B-A/file_B-A-1 .

In order to achieve this, I need to retrieve the data-url from <h2 data-url="folder_A">folder A</> , <h2 data-url="folder_B">folder B</> , and <li data-url="file_B-A-1">file BA-1</li> , join them into an array and separate them with slashes.

Here is the jQuery I have so far:

$('li').click(function(){
    var parentUrl = $(this).parent().prev('h2').attr('data-url');
    var thisUrl = $(this).attr('data-url');
    alert(parentUrl+'/'+thisUrl);
});

My code only works for one parent, any idea how to retrieve all the data-url of the higher <h2> and join them into one array?

Here's a JSFiddle you can update.

Answer 1

Well I actually just found a solution that works before posting the question, but still it might help others. And there might be a better solution…

I used array.push();

var rawParentsUrl = [];
$(this).parents('ul').each(function(){
    rawParentsUrl.push( $(this).prev('h2').attr('data-url') );
});

Complete code:

$('li').click(function(){
    var rawParentsUrl = [];
    $(this).parents('ul').each(function(){
        rawParentsUrl.push( $(this).prev('h2').attr('data-url') );
    });
    var thisUrl = $(this).attr('data-url'),
        parentsUrl = rawParentsUrl.reverse().join('/'),
        completeUrl = parentsUrl+'/'+thisUrl;
    alert(completeUrl);
});

updated JSFiddle

Answer 2

You can use the .map() method. It returns a jQuery object containing the results of calling the function on each element in the collection. You can turn this into an array using .get() .

var rawParentsUrl = $(this).parents('ul').map(function() {
    return $(this).prev('h2').data('url');
}).get();