How to handle multiple data attributes with jQuery filtering?

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

You can check if any string includes any other string. var str = 'I like red and I like blue'; str.includes('red') // true str.includes('blue'); // true developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — TJBlackman
– TJBlackman, Commented Oct 15, 2018 at 21:07
Is your colour name fix in data-colour attribute ? like Red, Blue or does it contains any colour ? — Alpesh Jikadra
– Alpesh Jikadra, Commented Oct 16, 2018 at 4:21

Alexis Wilke · Accepted Answer · 2018-10-15 23:27:20Z

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

answered Oct 15, 2018 at 23:27

Alexis Wilke

21.2k11 gold badges111 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to handle multiple data attributes with jQuery filtering?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related