按多个数据属性元素过滤

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();

我想展示这个

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

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

谢谢

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
}

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

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}"]`);

当希望返回具有不同数据属性和不同数据属性值的多个元素时，始终存在

<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}"]`);