如何查找具有特定数据属性值的元素

Question

我根据数据属性过滤图像，并且对于每个过滤器数据属性，可以有多个标记值。要根据一个数据属性值匹配元素，您可以执行以下操作：

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

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

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

在jquery中是否有任何方法可以通过数据属性中的集合中的值进行选择？

我能想到的另一个选择是遍历所选元素的数组，但是我通过ajax以无限滚动方式加载图像，因此这个数组在某些时候会非常笨重。我也对非jquery解决方案持开放态度。

Answer 1

您必须在此背景下使用attribute contains a word selector，

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

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