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]);
};