Взаимно Эксклюзивные данные селекторы атрибутов

Question

Можно выбрать элементы на основе взаимоисключающих данных атрибутов, например: Я хотел бы .show() любые div сек с атрибутом данных country="united-kingdom", а также с 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

Я хотел бы .Show() любые дивы с атрибутом данных страны = «объединены-королевство», а также с типом = «партнером» ИЛИ «директор»?

Тогда вы хотите selector group:

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

Это говорит: матч любой элемент, который

• имеет класс post, имеет data-country набор для united-kingdom и имеет data-type набор для partner

  или

• Имеет класс post, имеет data-country набор для united-kingdom и имеет data-type набор для director

«или» часть поступает от ,, что и делает его группу селектор, а не один селектор.

---

В комментариях, вы сказали:

Пользователя может выбрать десять или более каждый термин таксономии, которая требует создания нагрузок перестановок это условное.

В этом случае, вы можете быть лучше с 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; и there'a polyfill вы можете использовать в ES2015 и раньше ...:

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

Answer 2

Вы можете добавить несколько селекторов, разделенных запятой

$('.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()