jQuery-遍历数据选项

Question

我正在使用jQuery的.data（）方法在锚标记上存储一些额外的数据。

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

通过示例可以看到，我可以像这样访问data属性：

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

其中“ foo”是键之一的名称。 效果很好，但我不会总是知道存在哪些数据属性，因此我无法专门对其进行调用。 我不想指定名称，仅获取data-options属性的全部内容，并遍历每个键以构建查询字符串。

我尝试了以下内容：

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

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

但这输出了以下内容：

Answer 1

将您的html更改为：

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

请注意json字符串的引号更改。 这是必需的，因为要使用的唯一有效引号是双引号。

演示： http : //jsfiddle.net/p5MGG/1/

Answer 2

根据jQuery data（）的文档 ：

当data属性是一个对象（以'{'开头）或数组（以'['开头）时，则使用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();

Answer 3

从您的示例来看，似乎返回的选项被解释为String 。 如果将它们显式解析为对象形式，则代码应产生预期的结果：

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

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