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”：“猫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');

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

2 个答案: