通过值为对象 (JSON) 的数据属性访问元素的最佳方法是什么？

Question

假设我有以下元素：

<div class='selector' data-object='{"primary_key":123, "foreign_key":456}'></div>

如果我运行以下，我可以在控制台中看到该对象。

console.log($('.selector').data('object'));

我什至可以像访问任何其他对象一样访问数据。

console.log($('selector').data('object').primary_key); //returns 123

有没有办法 select 这个元素基于这个属性中的数据？以下无效。

$('.selector[data-object.foreign_key=456]');

我可以遍历 select 或

的所有实例

var foreign_key = 456;
$('.selector').each(function () {
  if ($(this).data('object').foreign_key == foreign_key) {
    // do something
  }
});

但这似乎效率低下。有一个更好的方法吗？这个循环实际上比使用 selector 慢吗？

Answer 1

使用 "contains" 属性选择器。

$('selector[data-object*="foreign_key:456"]')

Answer 2

你可以试试the contains selector:

var key_var = 456;
$(".selector[data-object*='foreign_key:" + key_var + "']");

我认为您在示例中的循环可能会获得一点速度，因为在您的示例中 jQuery 是 JSON 解析属性的值。在这种情况下，它很可能使用 JS 本机 string.indexOf()。这里的潜在缺点是格式化非常重要。如果您在冒号和键值之间添加了一个额外的 space 字符，*= 将会中断。

另一个潜在的缺点是上面的内容也会匹配以下内容：

<div class='selector' data-object="{primary_key:123, foreign_key:4562}"></div>

密钥明显不同，但仍与模式匹配。您可以在匹配字符串中包含右括号 }：

$(".selector[data-object*='foreign_key:" + key_var + "}']");

但话又说回来，格式化成为一个关键问题。可以采用混合方法：

var results = $(".selector[data-object*='" + foreign_key + "']").filter(function () {
    return ($(this).data('object').foreign_key == foreign_key)
});

这会将结果缩小到只有具有数字序列的元素，然后确保它是过滤器的准确值。

通过值为对象 (JSON) 的数据属性访问元素的最佳方法是什么？

What is the best way to access an element through a data-attribute whose value is an object (JSON)?

javascript

jquery

json

custom-data-attribute