jQuery 按属性值获取/选择元素

Posted 2023-05-09

【中文标题】jQuery 按属性值获取/选择元素

【英文标题】：jQuery get/select element by property value

【发布时间】：2016-11-30 10:41:13

【问题描述】：

有没有办法通过属性值获取/选择元素，就像使用属性值一样：

$('[attribute="value"]')

例如，我会像这样使用 jQuery 设置一个属性：

$('#foo').prop('my-property', 'value');

然后我想找到一个具有'my-property' 属性并且其值为'value' 的元素。

【问题讨论】：

任何特定的属性？

你的意思是像输入值吗？

任何特定的元素？

【参考方案1】：

不，在选择器级别没有任何东西可以通过 property 值进行选择，只是（如您所知）属性值。

有些属性是属性的反射，这意味着设置属性会设置属性，这允许您使用属性选择器。例如，input 元素的defaultValue 属性是其value 属性的反映（value 属性不是）。

否则，您可以选择并使用filter 将结果列表过滤为您真正想要的元素。

重新编辑：

例如，我会像这样使用 jQuery 设置一个属性：

$('#foo').prop('my-property', 'value');

不，无法直接通过该属性进行选择，您需要类似于我上面的filter 建议：

var list = $("something-that-gets-you-close").filter(function() 
    return this["my-property"] == "value";
);

您可以考虑改用data-* 属性：

$("#foo").attr("data-my-property", "value");

然后

var list = $("[data-my-property='value']");

选择它（对于与CSS identifier 的定义匹配的值，内引号是可选的）。请注意，属性值始终是字符串。

注意：有一个长期的误解，即 jQuery 的 data 函数是 data-* 属性的简单访问器。它不是。它通过 jQuery 管理与元素关联的数据缓存，该缓存是从data-* 属性初始化，但与它们断开连接。特别是，.data("my-property", "value") 不会让您稍后通过 [data-my-property=value] 选择器找到它。

【讨论】：

感谢您如此详尽的回答！其实这也是我自己在网上搜索后的想法。无论如何，现在它也在 SO 上。