通过值是对象（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

有没有一种方法可以根据此属性中的数据选择此元素？ 以下无效。

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

我可以遍历选择器的所有实例

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

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

Answer 1

您可以尝试包含选择器 ：

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

我认为在示例循环中您可能会有所提高，因为在您的示例中jQuery是JSON来解析属性的值。 在这种情况下，最有可能使用JS本机string.indexOf() 。 潜在的不利之处在于格式化将非常重要。 如果最后在冒号和键值之间加了一个空格字符，则*=会中断。

另一个潜在的缺点是，上述内容还将与以下内容匹配：

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

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

Answer 2

具有“包含”属性选择器。

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