Check if value is within array

Question

I have a list of elements with an attribute as the following

<li grouping-id="6080" class="show-item"></li>
<li grouping-id="9938" class="show-item"></li>
<li grouping-id="9633" class="show-item"></li>

I need to check whether each grouping-id is within the array or not. If is NOT in the array, then remove the class "show-item"

This is what I am trying

var hiddenSoc = [6080,9633];

$("#filter .list li").each(function () {

   if($(this).is( "[grouping-id="+ hiddenSoc +"]" )) {
          $(this).removeClass("show-item");
    }

});

But at the moment, "hiddenSoc" is taking all of the arrays at a time. I need to check each one of them at a time and remove the class if it's not within the array

Answer 1

Using filter() and indexOf()

 var hiddenSoc = [6080, 9633]; $("#filter .list li").filter(function() { return hiddenSoc.indexOf(+$(this).attr("grouping-id")) > -1; }).removeClass("show-item"); 

 .show-item { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li grouping-id="6080" class="show-item">1</li> <li grouping-id="9938" class="show-item">2</li> <li grouping-id="9633" class="show-item">3</li> </ul> </div> 

Answer 2

The issue is because you're concatenating an entire array in to the attribute selector. You instead need to find values in the array which match the current grouping-id and then add/remove the class as necessary.

To do that you can use a combination of indexOf() and toggleClass() , like this:

 var hiddenSoc = [6080, 9633]; $("#filter .list li").each(function() { var $el = $(this); $el.toggleClass('show-item', hiddenSoc.indexOf($el.data('grouping-id')) != -1); }); 

 .show-item { color: #C00; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li data-grouping-id="6080" class="show-item">A</li> <li data-grouping-id="9938" class="show-item">B</li> <li data-grouping-id="9633" class="show-item">C</li> </ul> </div> 

Note that the grouping-id attribute is non-standard. As such I converted it to a data-* attribute, which can be used to store any custom metadata within an element. Also note the logic can be made even simpler if the show-item class is not present in the DOM at all when the page loads.

Answer 3

Just as another options, you could also use not() to perform the filtering.

 var hiddenSoc = [ 6080, 9633 ]; var exclusions = hiddenSoc.map( it => `[grouping-id="${it}"]` ).join( ',' ); $( '#filter .list li' ).not( exclusions ).removeClass( 'show-item' ); 

 #filter .list li:not(.show-item) { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li grouping-id="6080" class="show-item">6080</li> <li grouping-id="9938" class="show-item">9938</li> <li grouping-id="9633" class="show-item">9633</li> </ul> </div> 

Answer 4

You could create a Selector by using reduce and provide it with a prefix of JQuery's :not . This will select anything that doesn't match the specified query.

 var hiddenSoc = [6080,9633], socSelector = () => hiddenSoc.reduce((acc, v, i) => acc += `${i > 0 ? ",":""}[grouping-id="${v}"]`,""); $(`li:not('${socSelector()}')`).each((i,e) => e.classList.remove("show-item")); 

 .show-item { display: list-item; } li { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li grouping-id="6080" class="show-item">stuff</li> <li grouping-id="9938" class="show-item">stuff</li> <li grouping-id="9633" class="show-item">stuff</li> 

Answer 5

You can check the attribute value if not includes in the array:

 var hiddenSoc = [6080,9633]; $('#filter .list li').each(function(){ var gid = Number($(this).attr('grouping-id')); if(!hiddenSoc.includes(gid)) $(this).removeClass("show-item"); }); 

 .show-item{ color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter"> <ul class="list"> <li grouping-id="6080" class="show-item">111</li> <li grouping-id="9938" class="show-item">222</li> <li grouping-id="9633" class="show-item">333</li> </ul> </div> 

Answer 6

For my part i would have made it his way :

var hiddenSoc = [6080,9633];

$("#filter .list li").each(function () {
   if(!hiddenSoc.includes(parseInt($(this).attr("grouping-id"))))
   {
      $(this).removeClass("show-item");
   }
});

Here is the documentation for includes array function in JavaScript.

Instead of looking if your element attribut value IS one of the array value, think it the other way. Does my array contains my element attribut value. Check if a value is within an array vs Check if an array contain a specifique value.