互斥数据属性选择器

Question

是否可以 select 基于互斥数据属性的元素，例如：我想要 .show() 任何具有 [=14= 数据属性的 div 元素] 以及 type="partner" 或 "director"？类似于：

$('.post[data-country="united-kingdom"]&[data-type="partner,director"]').show();

或

$('.post[data-country="united-kingdom"]&[data-type="partner"]or[data-type="director"]').show();

Answer 1

您可以添加多个用逗号分隔的选择器

$('.post[data-country="united-kingdom"][data-type="artist"], .post[data-country="united-kingdom"][data-type="partner"]').show();

或者使用带有选择器的过滤器

$('.post[data-country="united-kingdom"]').filter('[data-type="artist"], [data-type="partner"]').show();

或带回调的过滤器

var countries = ["united-kingdom", "india", "france"],
    types     = ["artist", "partner"];

$('.post').filter(function() {
    return types.indexOf( $(this).data('type') ) !== -1 &&
           contries.indexOf( $(this).data('coutry') ) !== -1;
}).show()

Answer 2

I'd like to .show() any divs with data attribute of country="united-kingdom" and also with type="partner" OR "director"?

那么你想要一个 selector group:

$('.post[data-country="united-kingdom"][data-type="partner"], .post[data-country="united-kingdom"][data-type="director"]').show();

也就是说：匹配

的任何元素

class post，data-country 设置为 united-kingdom，data-type 设置为 partner

或
class post，data-country 设置为 united-kingdom，data-type 设置为 director

“或”部分来自 ,，这使它成为一个选择器组而不是单个选择器。

在评论中，您说：

The user might select ten or more of each taxonomy term which requires generating loads of permutations of this conditional.

在那种情况下，filter:

你可能会过得更好

var countries = ["united-kingdom"];  // This would be created from inputs
var types = ["partner", "director"]; // This too

然后

var results = $(".post[data-country][data-type]").filter(function() {
    var $this = $(this);
    return countries.indexOf($this.attr("data-country") != -1 &&
           types.indexOf($this.attr("data-type") != -1;
});

在 ES2016 或更高版本中，你可以使用 Array#includes——它给你一个简单的布尔值——而不是 Array#indexOf，你必须检查 -1；并且有一个 polyfill 可以在 ES2015 和更早版本中使用...:[=36=]

var results = $(".post[data-country][data-type]").filter(function() {
    var $this = $(this);
    return countries.includes($this.attr("data-country") &&
           types.includes($this.attr("data-type");
});

这甚至可以更进一步：

var criteria = {};
// From inputs, ...
criteria["country"] = ["united-kingdom"];
criteria["type"] = ["parter", "director"];

然后

var keys = Object.keys(criteria);
var selector= ".post" + keys.map(function(key) {
    return "[data-" + key + "]";
}).join();
var results = $(selector).filter(function() {
    var $this = $(this);
    return keys.every(function(key) {
        return criteria[key].includes($this.attr("data-" + key));
    });
});

只要我们考虑 ES2015 和 ES2016：

const keys = Object.keys(criteria);
const results = $(selector).filter(() => {
    const $this = $(this);
    return keys.every(key => criteria[key].includes($this.attr("data-" + key)));
});

或者如果你真的想发疯：

const keys = Object.keys(criteria);
const results = $(selector).filter(() =>
    keys.every(key => criteria[key].includes(this.getAttribute("data-" + key)))
);

互斥数据属性选择器

Mutually Exclusive Data Attribute Selectors

javascript

jquery

custom-data-attribute