jQuery：從多個父級檢索屬性並將它們存儲到單個數組中

Question

我有一個用PHP生成的HTML列表結構，它可以模擬目錄結構。

如果我的目錄如下：

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

我想要實現的是單擊它時從其父元素的data-url重建<li>文件的完整URL。

例如， 文件BA-1的完整URL為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 BA-1</li> ，將它們合並成一個數組，並用斜杠將其分開。

這是到目前為止的jQuery：

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

我的代碼僅適用於一個父級，不知道如何檢索更高的 <h2>所有data-url並將它們連接到一個數組中？

這是您可以更新的JSFiddle 。

Answer 1

好吧，我實際上只是在發布問題之前找到了一種可行的解決方案，但仍然可以幫助其他人。 也許會有更好的解決方案……

我用了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

Answer 2

您可以使用.map()方法。 它返回一個jQuery對象，其中包含對集合中每個元素調用函數的結果。 您可以使用.get()將其轉換為數組。

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