使用jQuery處理此數據的正確方法是什么？

Question

我有一個帶有數據屬性的html元素列表，我想將它們組裝成一個jQuery對象並操縱這些值。

在each循環中動態添加這些數據的最佳方法是什么，這樣我就可以輕松地按以下方式訪問數據： data.name和data.name.prop ？

我希望所有命名約定都是動態的並基於數據。

我的代碼基於此處的最佳答案： 如何創建動態命名的JavaScript對象屬性？

到目前為止，我有：

$('.licences-list .data div').each(function(index) { 
    var data = {}
    cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
    cats.push(data)
})

但是，當我嘗試遍歷data數組時，如下所示：

$.each(cats, function(key, value){
    $('<div class="card"><p>'+value+'</p></div>').appendTo('#commercial-licenses');
});

我只是得到[object Object]輸出...而我不確定為什么！

Answer 1

var data = {}
    cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')

每次循環遍歷時，實際上實際上是將一個空對象（數據）添加到數組（貓）中。 然后，您要為$ .each不知道的那個數組（貓）分配一個命名屬性（它會忽略它們，因為它正在實際數組上進行迭代）。

我的猜測是，您需要一個類似於以下內容的對象映射：var cats = {“ f1”：“貓科動物1”，“ f2”：“貓科動物”};

在這種情況下，您想要的是：

var cats = {};
$('.licences-list .data div').each(function(index) { 
    cats[$(this).find('p').data('cat')] = $(this).find('p').data('catname')
})

如果您希望一個數組包含的值不僅僅是字符串（或添加到元素的任何數據）更多的值，則每次創建新對象並將它們附加到cats數組中：

var cats = [];
$('.licences-list .data div').each(function(index) { 
    cats.push({
       'id': $(this).find('p').data('cat'),
       'name':  $(this).find('p').data('catname')
    });
})

然后，這將為您提供一個數組，您可以在其中使用$ .each，並使用以下值訪問值：value.id，value.name

Answer 2

不要過於復雜。

$('.div').attr('data-attribute', 'data-value');

使用您的示例：

$('.licences-list .data div').attr('attribute-name', 'attribute-value');