jQuery - 通过数据选项循环

我正在使用jQuery的.data()方法在锚标记上存储一些额外的数据。jQuery - 通过数据选项循环

<a href="/someurl/" class="someLink" data-options="{'checkout_authentication':'create_account', 'foo':'bar'}">Link</a>

我看到因为我可以访问数据属性，像这样的例子：

$("a.someLink").data("options").foo

其中“富”是关键之一的名称。这很好，但我不会总是知道存在哪些数据属性，所以我不能专门调用它们。我想不是指定名称，只获取data-options属性的全部内容，并循环遍历每个键来构建查询字符串。

我试过类似如下：

var dataOptions = $(this).data('options'); 

for(var index in dataOptions) { 
    console.log(index,dataOptions[index]); 
};

但那是输出如下：

enter image description here

2012-03-15 jyoseph

'$（ “分区”）数据（“options”）。foo'给我'undefined'，你确定它适合你吗？ – gdoron 2012-03-15 16:20:04

你在数据选项里面有什么是一个字符串而不是一个对象。所以它认为它是一个字符串.. ..循环遍历每个字符。 – 2012-03-15 16:20:38

@SKS通常jQuery将使用JSON.parse来解析字符串并返回对象。只有当字符串不能被解析时，jQuery才会按原样返回字符串。 – Yoshi 2012-03-15 16:28:18

改变你的HTML：

<a 
    href="/someurl/" 
    class="someLink" 
    data-options='{"foo":"barski", "bar":"fooski"}' 
>Link</a>

注意报价JSON字符串的变化。这是必需的，因为唯一有效的引号是双引号。

2012-03-15 16:20:12 Yoshi

+1为好！ – rjz 2012-03-15 16:21:52

是的，这是主要问题。解析json是一个很好的提示（我会这样做，一旦json有效）。谢谢！（当SO让我接受时会接受） – jyoseph 2012-03-15 16:26:50

@jyoseph如果格式有效，则不需要使用'JSON.parse'。 jQuery会自动为你做这件事。 – Yoshi 2012-03-15 16:27:35

-1

从你的榜样，它看起来像返回被解释为String选项。如果你明确地解析他们为目标的形式，你的代码应该产生预期的结果：

var dataOptions = JSON.parse($("a.someLink").data("options")); 

for(index in dataOptions) { 
    console.log(index, dataOptions[index]); 
};

2012-03-15 16:20:09 rjz

另外，请注意，您的JSON需要正确格式化才能正常工作。这意味着在整个键和值周围使用双引号（参见Yoshi的回答）。 – rjz 2012-03-15 16:23:55

当数据属性是一个对象（以 '{'）或阵列（以 '[' 开头），则使用jQuery.parseJSON解析字符串;它必须遵循有效的JSON语法，包括带引号的属性名称。

你data-options是不有效的JSON，因为它使用'，而不是"。如果您更改为：

<a href="/someurl/" class="someLink" data-options='{"foo":"barski", "bar":"fooski"}'>Link</a>

它做你想做的。

编辑：另一种方法是存储你的选择是个人data属性：

<a href="/someurl/" class="someLink" data-foo="barski" data-bar="fooski">Link</a>

并遍历data()代替：

var options = $(this).data();

2012-03-15 16:23:32

回答