javascript - 我可以使用 jquery 访问存储在 html 元素数据属性中的哈希吗？

Question

我有几个 html 元素，我要像这样附加哈希:

<p class='message' data-dependencies={'#first':{'equal':'Yes'}}>
  Relevant Content
</p>

这样

$(".message").first().data("dependencies")

返回

{'#first':{'equal':'Yes'}}

不过刚才有个哥们给我指出，这个值是一个字符串。因此，下面描述的过滤器自然会遇到困难。

过滤器的目标是能够抓取具有指定键的元素，在本例中为“#first”。

$el.children().find("*").filter(function(){
    var dependency_hash = $(this).data("dependencies");
    if(dependency_hash != undefined && "#first" in dependency_hash){
      return true
    }
});

有没有一种方法可以访问通过数据对象传递的哈希值，或者是否有另一种方法可以构造数据以实现能够基于键选择元素的相同方法？

Answer 1

如果将其存储为有效的 JSON，则可以对其进行解析，得到的是内容。

<p class='message' data-dependencies='{"#first":{"equal":"Yes"}}'>
  Relevant Content
</p>

---

var json = $(".message").first().attr("data-dependencies");

// HTML5 browsers
// var json = document.querySelector(".message").dataset.dependencies;

var parsed = $.parseJSON(data);

alert(parsed["#first"].equal); // "Yes"

---

或者如果你使用 jQuery 的 .data()，它会自动解析它。

var parsed = $(".message").first().data("dependencies");

alert(parsed["#first"].equal); // "Yes"