如何使用jQuery过滤处理多个数据属性？

Question

Using this code , what if you wanted to handle more than one data attribute. For example, if the first one could be blue OR red, it would have an attribute of data-colour="Blue, Red" . How can I update the jQuery to handle this? In other words, it would now need to search for the data-value within the entire data-colour string, not just an exact match.

Is this doable within the code below?

HTML:

<div data-brand="Nike" data-price="31" data-colour="Blue"  data-size="medium">
  Blue medium</div>
  <div  data-brand="Nike" data-price="31" data-colour="Blue"  data-size="medium">
  Blue medium</div>
  <div data-brand="Nike" data-price="31" data-colour="Blue" data-size="large">
  Blue large </div>
<div data-brand="Nike" data-price="31" data-colour="Red" data-size="small">
  Red Small</div>
  <div data-brand="Addidas" data-price="31" data-colour="Red" data-size="small">
  Red Small</div>
Colours: Blue <input type="checkbox" id="BlueCB" data-type="colour" data-value="Blue" checked> 
Red <input class="chbx" type="checkbox" id="RedCB" data-type="colour" data-value="Red" checked>
Brand: Nike <input type="checkbox" id="NikeCB" data-type='brand'  data-value='Nike' checked>
Size: Large<input type="checkbox" id="LargeCB" data-type="Size"  data-value='large' checked>
Size: Medium<input type="checkbox" id="MediumCB" data-type="Size"  data-value='medium' checked>

JS:

var $boxes = $('input[data-type]'), //all input boxes with data-type attribute
    $dataObjects =$(); //will be filled with all bound data elements
$boxes.each(function(ind, inp){     //create filter information
    var type = inp.dataset.type, value = inp.dataset.value; //for older browsers, use  $(inp).data('type')  
  var filter =  'div[data-' + type +'="' + value +'"]';     
  inp.dataset.filter = filter;
    $.merge($dataObjects,$(filter));
}); 

$boxes.change(function(){
    var blacklist = $boxes.filter(function(i,b){return !b.checked})
    .map(function(i,b){return b.dataset.filter}).toArray().join();
  $dataObjects.hide().not(blacklist).show();
});

Answer 1

You may want to read the page of jQuery Selectors .

An OR is easy enough, you can just include multiple attributes one after the other:

...filter("[data-colour*='red'][data-colour*='blue']")...

The text comparison is case sensitive.

In regard to filtering , you can filter() the DOM elements from your existing list, filter the children() thereof, filter the descendants with find() , filter the parent() or parents() , or even search everything with contents() (although I don't think attributes would work against contents() ).