javascript - 使用jQuery处理此数据的正确方法是什么？

我有一个带有数据属性的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]输出...我不确定为什么！

最佳答案

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

关于javascript - 使用jQuery处理此数据的正确方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57610897/