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

【问题标题】：What is the best way to access an element through a data-attribute whose value is an object (JSON)?通过值为对象 (JSON) 的数据属性访问元素的最佳方法是什么？
【发布时间】：2015-05-30 04:06:50
【问题描述】：

假设我有以下元素：

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

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

【问题讨论】：

这对你有用吗：api.jquery.com/attribute-contains-selector
我无法重现你的结果，你的意思是你的html就像data-object='{"primary_key":123, "foreign_key":456}'
是的！非常抱歉，谢谢。编辑我的原始帖子。

标签： javascript jquery json custom-data-attribute

【解决方案1】：

你可以试试the contains selector:

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

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

【讨论】：

好主意。请注意，最后一个使用filter 的示例要求该值是一个有效格式化的对象，而不仅仅是一个字符串（如Musa 所述）：{"primary_key":123,"foreign_key":456}。在这里演示：working 与 not working。
@showdev 当然。我实际上没有意识到 jQuery 会“自动”解析属性中的 JSON 数据。在 OP 采取的任何路线中，正确和一致的格式都很重要。
非常好！谢谢。
@jwatts1980 我一直在使用 php 的 json_encode 函数，并且在输入这篇文章时懒得检查格式是否正确。希望格式化不会给我带来太多麻烦。
@user3630824 不客气。正如在其他 cmets 中提到的那样，JSON 中的参数名称应该有引号。由于*= 与字符串值匹配，因此如果引号将成为您的模式的一部分，请确保包含引号。与大多数脚本语言一样，可能需要一些试验和错误才能使其正确。

【解决方案2】：

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

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

【讨论】：