从多个父元素中检索属性并将其存储到单个数组中

jQuery: Retrieve attributes from several parents and store them into a single array

本文关键字：存储 数组 单个 属性 元素 检索      更新时间：2023-09-26

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

我想要实现的是重建一个<li>文件的完整URL，当你点击它，从data-url的父元素。

例如文件B-A-1的完整URL为folder_B/folder_B-A/file_B-A-1。

为了实现这一点，我需要从<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>中检索data-url，将它们连接到一个数组中，并用斜杠将它们分开。

这是我到目前为止的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

嗯，我实际上只是找到了一个解决方案，在张贴问题之前，但它仍然可能帮助别人。也许有更好的解决办法…

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

您可以使用.map()方法。它返回一个jQuery对象，其中包含对集合中的每个元素调用该函数的结果。您可以使用.get()将其转换为数组。

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