如何将数组传递到jQuery .data()属性


86

好的,所以我想将一个非常基本的数组传递到jquery数据attrubute服务器端,如下所示:

<div data-stuff="['a','b','c']"></div>

然后像这样回撤:

var stuff = $('div').data('stuff');

alert(stuff[0]);

为什么这似乎会警告'['而不是'a'(请参阅JSfiddle链接)

JSFiddle链接: http : //jsfiddle.net/ktw4v/3/

Answers:


144

它将变量视为字符串,其第零个元素为[

发生这种情况是因为您的字符串不是有效的JSON,它应使用双引号作为字符串定界符而不是单引号。然后,您必须使用单引号分隔整个属性值。

如果您修改了引号,则原始代码有效(请参见http://jsfiddle.net/ktw4v/12/

<div data-stuff='["a","b","c"]'> </div>

var stuff = $('div').data('stuff');

当jQuery在data属性中看到有效的JSON时,它将自动为您解压缩


5
实际上,['a','b','c']不是有效的JSON;)
stecb 2011年

2
['a','b','c']无效JSON
Mutt

JSON应该是什么样?
wilsonpage 2011年

5
它应该使用双引号,但是随后您必须使用单引号将HTML属性括起来。
Alnitak

1
@JoeBrockhaus都是定界符-引号是“字符串定界符”,逗号是“记录定界符”。只有前者与OP的问题有关。
Alnitak

15

将其声明为属性意味着它是一个字符串。

因此stuff[0]相当于:var myString = "['a','b','c']"; alert(myString[0]);

您需要使其如下所示:

<div data-stuff="a,b,c"></div>

var stuff = $('div').data('stuff').split(',');
alert(stuff[0]);

撤消:jQuery的解析失败,因为它不符合parseJSON的规则。

但是,我将支持我的解决方案。其他方面存在一些不理想的方面,就像该解决方案在某些方面不理想一样。一切都取决于您的范例。


4
不,将其声明为无效JSON意味着将其视为字符串。
Alnitak

@Alnitak-尽管这很可能是jQuery对待它的方式-我在jQuery Api参考中没有看到这一点,并且在w3c规范中最肯定并不清楚。由于在dom对象中定义JSON会破坏w3c的“中立性”,因此,这似乎是jQuery扩展,或者由于缺乏文档而变得怪异。无论如何,尽管在这一点上我不能说我同意你的看法,但我并没有因此而感到沮丧,因此我将删除你得到的第一个+1。
约翰·格林

@约翰它jQuery的API中记录- “每一个试图将字符串转换为JavaScript值(包括布尔,数字,对象,数组和null),否则它保留为一个字符串。”
Alnitak

@Alnitak然后,我很高,因为在发布之前,我几乎阅读了整个数据部分和许多评论。我只是再次看了看。
约翰·格林

@Alnitak好的,我是从您的编辑中找到的。是的,这是一个Jquery扩展。我会补充我的职位。
约翰·格林

-2

由于其他人已将值识别为字符串,因此它返回“ [”。请尝试一下(aaa是div的名称,我取出了数据资料):

$(function(){
    $.data($("#aaa")[0],"stuff",{"aa":['a','b','c']});
    var stuff = $.data($("#aaa")[0],"stuff").aa;
    alert(stuff[0]); //returns "a"
});

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.