Question

如果我将数组存储在$('#test1').data('array-test',["one","one","one","one","one"])等数据属性中，或者在调用<div data-array-test='["one","one","one","one","one"]'> </div>时在html中写入$('#test1').data('array-test')，我会返回一个数组。

但是，如果我使用循环填充数组，然后将数组添加到html中，因为它生成如下所示，我得到一个字符串而不是数组。我已经评论了其他一些方法。

如何让retrievedVal2下面的数组返回？]

请注意，在我的实际用例中，属性将包含多维数组

＆＃13;

var retrievedVal1=$('#test1').data('array-test');

var myArray=[];
for(var i = 0;i<5;i++){
    myArray.push("one");
}
// $('#test2').append('<div id="test3" data-array-test="'+myArray+'"></div>');
// $('#test2').append('<div id="test3" data-array-test=\''+myArray+'\'></div>');
$('#test2').append('<div id="test3" data-array-test=\''+myArray.toString()+'\'></div>');

var retrievedVal2=$('#test3').data('array-test');
// var retrievedVal2=JSON.parse( $('#test3').data('array-test')); // gives "Uncaught SyntaxError: Unexpected token o"


var test;

＆＃13;

<div id="test1" data-array-test='["one","one","one","one","one"]'></div><br><br>
<div id="test2"></div>

＆＃13;

Answer 1

myArray.toString()生成one,one,one。你需要的是[“一个”，“一个”，“一个”]。

使用JSON.stringify（myArray）为数组创建正确的字符串格式。

$('#test2').append('<div id="test3" data-array-test=\''+JSON.stringify(myArray)+'\'></div>');

Answer 2

很明显，您为data-array-test属性设置了字符串数据（每个元素都没有任何引号，也缺少方括号）。所以它应该是这样的：

var myArray=[];
for(var i = 0;i<5;i++){
  myArray.push("\"one\"");
}
$('#test2').append('<div id="test3" data-array-test=\'['+myArray.toString()+']\'></div>');

Answer 3

jQuery会将任何无效的JSON转换为字符串。使用JSON.stringify来转换它。我更喜欢使用appendTo（）然后将attr（）链接到：

$('<div id="test3"></div>').appendTo($('#test2').attr("data-array-test", JSON.stringify(myArray)));

Answer 4

var ids = [];
ids.push(1);
ids.push(2);
$('#element_id').attr('data-ids',JSON.stringify(ids)); // storage
ids = JSON.parse($('#element_id').attr('data-ids').split(",")); // retrivied

在生成html时，在html数据属性中由.push（）填充的存储数组

4 个答案: