javascript - 使用 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 不知道的数组(cats)(它会忽略它们，因为它正在迭代实际的数组)。

我的猜测是你想要一个对象映射，如下所示: 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')
})

如果您想要一个包含更多值的数组，而不仅仅是字符串(或添加到元素中的任何数据)，则每次都创建新对象并将它们附加到 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