使用 jQuery 处理这些数据的正确方法是什么？

Question

我有一个带有数据属性的 html 元素列表，我想将其组装成一个 jQuery 对象并操作值。

在each 循环中动态添加它们以便我可以轻松访问数据的最佳方法是：data.name 和data.name.prop？

我希望所有命名约定都是动态的并基于数据。

我的代码基于此处的最佳答案：How to create dynamically named JavaScript object properties?

到目前为止我有：

$('.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": "feline 1", "f2": "feline" };

在这种情况下，你想要的是：

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

如果您想要一个包含更多值的数组，而不仅仅是字符串（或您添加到元素中的任何数据），您每次都创建新对象并将它们附加到 cat 数组中：

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');