jQuery: получить атрибуты от нескольких родителей и сохранить их в одном массиве

Question

У меня есть структура списка HTML, сгенерированная с PHP, которая имитирует структуру моего каталога.

Если мой каталог выглядит следующим образом ...

• 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 

мой HTML выглядит следующим образом:

<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> 

То, что я хочу, чтобы достичь является восстановить полный URL в виде <li> файла при нажатии на кнопку он, из data-url его родительских элементов.

Например, полный URL-адрес файла B-A-1: folder_B/folder_B-A/file_B-A-1.

Для того, чтобы достичь этого, мне нужно, чтобы получить data-url от <h2 data-url="folder_A">folder A</>, <h2 data-url="folder_B">folder B</> и <li data-url="file_B-A-1">file B-A-1</li>, присоединиться к ним в массив и разделить их с косой черты.

Вот JQuery я до сих пор:

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

Мой код работает только для одного из родителей, любая идея, как получить все data-url из выше<h2> и объединить их в один массив?

Адрес JSFiddle, который вы можете обновить.

Answer 1

Вы можете использовать метод .map(). Он возвращает объект jQuery, содержащий результаты вызова функции для каждого элемента коллекции. Вы можете превратить это в массив, используя .get().

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

Answer 2

Ну, я действительно нашел решение, которое работает перед публикацией вопроса, но все же это может помочь другим. И может быть лучшим решением ...

Я использовал array.push();

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

Полный код:

$('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); 
}); 

обновленный JSFiddle