如何找到具有特定数据属性值的元素[重复]答案

【问题标题】：How to find an element with specific data attribute value [duplicate]如何找到具有特定数据属性值的元素[重复]
【发布时间】：2016-07-21 15:43:35
【问题描述】：

我正在根据数据属性过滤图像，每个过滤器数据属性可以有多个标签值。要根据一个数据属性值匹配元素，您可以这样做：

$('.image-container').filter('[data-places="Canada"]').css('display','none');

但是当我尝试使用空格分隔列表时，它不起作用：

<div class="image-container" data-places="Nunavut Canada">...</div>

jquery 中有什么方法可以通过数据属性中的集合中的值进行选择吗？

我能想到的另一个选项是循环遍历选定元素的数组，但我已经通过 ajax 在无限滚动中加载图像，所以这个数组在某些时候会非常庞大。我也对非 jquery 解决方案持开放态度。

【问题讨论】：

api.jquery.com/attribute-contains-selector
你最好为国家设置一个数据属性，为地区/州设置另一个
其实可以有任何级别的地名，我不提前知道，因为它都是动态的。按照我的设置方式，它确实很有意义。
不要这样做，暂时不要使用数据属性。由于 html5 仍未标准化，因此这不是跨浏览器。如果您真的想使用 jquery 元数据插件，请不要使用下面提供的解决方案，只会给您带来问题。编辑。哦，你已经努力了，那么你会努力学习的；）
@vove caniuse.com/#feat=dataset 你指的是哪些浏览器，IE6/7 还是什么？而且您发布的链接是 5yo（编辑：我看到它指的是无效的 HTML 属性，但现在所有浏览器都支持 data-* one）

【解决方案1】：

你必须在这种情况下使用attribute contains a word selector，

$('.image-container').filter('[data-places~="Canada"]').css('display','none');

属性等于选择器不能在此处使用，因为您正在搜索属性中的特定单词。您也可以使用属性包含选择器，但这也会选择具有data-places="NunavutCanada"> 之类的属性的元素。

【讨论】：

这和$('.image-container [data-places~="Canada"]')有什么区别？
@dandavis 选择属性等于特定值的元素，但不是单词。同时，~= 选择具有空格分隔的属性值的元素，并且任何一个空格分隔的值匹配到。阅读此处了解更多信息。 api.jquery.com/attribute-equals-selector
对于遇到类似问题的任何人，':not([data-places~="Canada"])' 选择相反的。
@KatharineOsborne 很高兴知道您正在分享您获得的知识。