在 jQuery 选择器中混合逻辑 AND 和 OR

Posted 2023-05-09

【中文标题】在 jQuery 选择器中混合逻辑 AND 和 OR

【英文标题】：Mixing logical AND and OR in jQuery selector

【发布时间】：2017-01-11 22:16:44

【问题描述】：

我必须过滤包含两个关键数据属性的项目列表：

<li class="song" data-title="freedom" data-id="7" data-tags="tag-18-eot,tag-2-eot" data-category="1">Freedom</li>

类别 标签

按类别过滤应按逻辑或，按标签过滤应按逻辑与。

使用这两者之一进行过滤不是问题。

我申请了，例如：

$(collection).filter('li[data-tags*="tag-50-eot"][data-tags*="tag-51-eot"]');

按标签过滤。或者：

$(collection).filter('[data-category="1"], [data-category="2"]);

按类别过滤。

这很好用。但是，我找不到将这两个选择器组合成一个查询的方法，我可以将其传递给 filter() 函数，并且链接两个 filter() 调用不会产生预期的结果，因为第一个调用可能会过滤掉第二次调用会留下的物品。

我发现this question 有一个类似的主题，但问题有点不同，方法也一样。

如何正确过滤这些项目？

【问题讨论】：

您是否尝试过简单地先用 AND 链接？

链接两个 filter() 调用不会产生预期的结果，因为第一个调用可能会过滤掉第二个调用会留下的项目。 是什么让你这么认为?

不确定预期结果是什么？返回所有设置了data-tags 和data-category 属性的元素？

如果我理解正确，您仍然需要应用第一个过滤器，所以我认为链接两个 filter() 调用没有问题。

@MattWay – 哇，有时解决方案非常简单，而且非常合乎逻辑。发布答案以便我接受？

【参考方案1】：

只要首先使用AND 条件，您应该能够通过链接获得所需的内容。例如：

var res = $('#collection li')
    .filter('li[data-tags*="tag-50-eot"][data-tags*="tag-51-eot"]')
    .filter('[data-category="1"], [data-category="2"]'); 

小提琴here.

【参考方案2】：

过滤器函数可以接收一个函数作为输入...

你最终可能会得到这样的结构：

var set = $(collection).filter(
function( index, element )

    return ($(element).attr(...) == "...");

);

【讨论】：

我没有得到反对...我认为该网站的目的是为人们指出正确的方向，而不是为他们做他们的工作。