遍历jquery数据(）对象，并将它们推送到另一个数据(）的对象(数组）中

iterate through jquery data() objects and push them into another data() object (array)

本文关键字：对象 数据 另一个 数组 jquery 遍历      更新时间：2023-09-26

如何将对象推送到作为数组的jquery data()对象中。最后，我想得到包含一组对象的数据属性numbers，这些对象是我通过循环某个特定类的html获得的。我不明白如何将每个对象推入数组。

我的第一个问题是，如果我在一个对象中有一些数据，我如何看待整个对象。我以前似乎可以做

$('#div1').data('values', {'one' : 'UNO', 'two' : 'DUE'});console.log($('#div1').data('values'))

Chrome会给我一个可扩展的小对象。现在我只看到[object Object]，如果我做，我仍然可以看到它们

console.log($('#div1').data('values').one)。

但是，如果我不知道data()对象中到底有什么，这似乎会有点不方便。这将有助于检查我离实现这一目标有多近。

一旦我将所有数据分配给它们各自的对象，

$(document).ready(function(){
  $('#div1').data('values', {'one' : 'UNO', 'two' : 'DUE'});
  $('#div2').data('values', {'three' : 'TRE', 'four' : 'QUATTRO'});
  $('#div3').data('values', {'five' : 'CINQUE', 'six' : 'SEI'});
  $('#div4').data('values', {'seven' : 'SETTE', 'eight' : 'OTTO'});
});

我如何循环遍历这些对象（都有一个共享类add），并将它们在data.values中包含的对象放入另一个data()对象中？在这里，我尝试在body的数据对象numbers:上执行此操作

  `$('body').data('numbers', []);`

因此

$('body').data('numbers') =
['div1': {
    'one': 'UNO',
    'two': 'DUE'
},
'div2': {
    'three': 'TRE',
    'four': 'QUATTRO'
},
'div3': {
    'five': 'CINQUE',
    'six': 'SEI'
},
'div4': {
    'seven': 'SETTE',
    'eight': 'OTTO'
}]

我的尝试失败了：

    $('.add').each(function (index, element) {
        $('body').data(numbers, {
            element.attr('id'): element.data('values')
        //could not understand how to use push here, though it seems likely that's the answer
     });

jsbin

JavaScript没有关联数组，因此必须使用Object。然后使用括号表示属性（键）名称：

var values = {};
$('.add').each(function (index, element) {
    values[element.id] = $(element).data('values');
});
$('body').data('numbers', values);

jsBin

关于[object Object]，在将对象输出到控制台之前，您可能会意外地与对象进行字符串连接，否则这是Chrome控制台中的一个错误。

使用数组，您可以使用.push将项目推送到数组的末尾：

var values = [];
$('.add').each(function (index, element) {
    values.push( $(element).data('values') );
});

纸盒

在初始化数组并将其存储在元素的.data()中之后，您可以稍后通过简单地获取对array对象的引用并在其上调用.push()来将项目推入其中：

var values = [];
$('.add').each(function (index, element) {
    values.push( $(element).data('values') );
});
$('body').data('numbers', values);
$('body').data('numbers').push({'nueve': 'nine'});
//logs "nueve" too as Array/Objects/Functions are passed by reference and the
//previous command pushed an item into the Array object referenced ("stored")
//in the $('body').data('numbers')
console.log( $('body').data('numbers') );

纸盒

相关文章：