Javascript 通过值为对象（JSON）的数据属性访问元素的最佳方式是什么？

假设我有以下元素：

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

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

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

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

是否有方法根据此属性中的数据选择此元素？以下方法不起作用

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

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

var外键=456；
$（'.selector'）。每个（函数（）{
if（$（this）.data（'object'）.foreign\u key==foreign\u key）{
//做点什么
}
});

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

带有“包含”属性选择器

$（'selector[data object*=“foreign_key:456”]）

您可以尝试：

我认为在您的示例中，您可以在循环中获得一点速度，因为在您的示例中，jQuery是JSON解析属性的值。在本例中，它很可能使用JS native

string.indexOf（）

。这里潜在的缺点是格式将非常重要。如果在冒号和键值之间有一个额外的空格字符，则

*=

将中断

另一个潜在的不利因素是，上述因素也将与以下因素相匹配：

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

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

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

---

这将把结果缩小到只包含数字序列的元素，然后确保它是过滤器的精确值。

这对您有效吗：我无法重现您的结果，您的意思是您的html像

数据对象='{“primary_key”：123，“foreign_key”：456}'

是的！非常抱歉，谢谢。编辑我的原创文章。好主意。请注意，使用

过滤器的最后一个示例要求值是有效格式化的对象，而不仅仅是字符串（如Musa所述）：
{“primary_key”：123，“foreign_key”：456}
。这里演示：vs.@showdev当然可以。实际上，我没有意识到jQuery会“自动”解析属性中的JSON数据。在OP在这里采取的任何路线中，正确和一致的格式都是重要的。非常好！谢谢。@jwatts1980我一直在使用php的json_encode函数，在键入这篇文章时太懒了，无法检查格式是否正确。希望格式化不会给我带来太多麻烦。@user3630824不客气。正如在其他注释中提到的，JSON中的参数名称应该有引号。由于
*=
与字符串值相匹配，因此如果它们将成为模式的一部分，请确保包含引号。与大多数脚本语言一样，可能需要一些尝试和错误才能使其正确。
$(".selector[data-object*='foreign_key:" + key_var + "}']");

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