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

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">。