按多个数据属性元素进行筛选

Question

我有一些列表项，希望使用选择器进行过滤，如果数据属性具有所有选择选项值，而不仅仅是具有一个或另一个，则需要进行过滤。

<li class="filterme" data-type="Primary Academy Physical KS1">item 1</li>
<li class="filterme" data-type="Secondary Academy Physical KS2">item</li>
<li class="filterme" data-type="Secondary Academy Physical KS1">item 1</li>
<li class="filterme" data-type="Academy Physical KS1">item 1</li>

我有一些选择框会触发onchange事件，首先隐藏所有项目。

$('.filterme').hide();

我希望您可以帮忙翻译：当一个数据属性包含传递给它的所有值时，我想展示它。 我尝试过：

$(".filterme[data-type*='" + Secondary && Physical && KS1 + "']").show();

Which i want to show this one

<li class="filterme" data-type="Secondary Academy Physical KS1">item 1</li>

但是它没有显示任何匹配项，我可以让它只使用一个值，但是如何检查数据属性是否包含多个值，而不是OR而是AND？

谢谢

- user1512356

Answer 1

另一种选择是使用多个选择器然后在它们上进行筛选。

项目1 等等

然后您可以按以下内容进行筛选：

// data-type1 AND data-type-2
if ($(this).find('[data-type1="Primary"][data-type-2="Academy"]').length) {
    //stuff
}

// data-type1 OR data-type-2
if ($(this).find('[data-type1="Primary"],[data-type-2="Academy"]').length) {
    //stuff
}

- omarjebari

Answer 2

试着这样做

$(".filterme").each(function() {
  if ($(this).data("type").indexOf("Secondary") > -1 && $(this).data("type").indexOf("Physical") > -1 && $(this).data("type").indexOf("KS1") > -1) {
    console.log($(this).data("type"));
  }
})

DEMO

- Anik Islam Abhi

---

谢谢。我将console.log($(this).data("type"));改为$(this).show();现在完美了。 - user1512356

Answer 3

@omarjebari 给出了很好的答案，但对于想要返回具有不同数据属性和不同数据属性值的多个元素的程序员来说，这两者并不总是同时存在。

<p class='my-class' data-attribute1='1'></p>
<p class='my-class' data-attribute2='2'></p>

// data-attribute1 OR data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute2="${secondID}"]`);

当需要返回具有不同数据属性和不同数据属性值的多个元素时，其中ARE始终存在

<p class='my-class' data-attribute1='1' data-attribute2='1'></p>
<p class='my-class' data-attribute1='1' data-attribute2='2'></p>

// data-attribute1 AND data-attribute2
$(".my-class").filter(`[data-attribute1="${firstID}"][data-attribute2="${secondID}"]`);

逗号的放置对于区分使用OR或AND 参数是至关重要的。

---

同样适用于具有相同数据属性但不同属性值的元素。

$(".my-class").filter(`[data-attribute1="${firstID}"],[data-attribute1="${secondID}"]`);

- Codingwiz