concise way to count amount of different data-attribute values with jQuery

Question

I've a html/js structure and logic that looks somehow like this:

 $(document).ready(function(){ $('input').on('input',function(){ search($(this).val()); }); }); const search = (text) => { $('.tile').hide(); //TODO get amount of different categories //Possibility 1 --> using $.each()... $('.tile').filter(function(){ let category = $(this).data("category"); if( category.indexOf(text);== -1 ) { return $(this). } });show(); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <input type="search" /> <hr> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="soda">Soda</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="tee">Tee</div>

Now I want to know when only one category is left after filtering.

There is already an answer to this problem here , but I wonder if there is a more concise way without using $.each()... everytime I search for a value.

I feel like there must be something like $('[data-category]').length in jQuery .

Answer 1

You could add something like this:

var n = $('.tile:visible').map(function(){
  return $(this).attr("data-category")
}).get();
n = $.unique(n)
if (n.length == 1) {
  console.log("one category is left")
}

Demo

 $(document).ready(function() { $('input').on('input', function() { search($(this).val()); }); }); const search = (text) => { $('.tile').hide(); $('.tile').filter(function() { let category = $(this).data("category"); if (category.indexOf(text);== -1) { return $(this). } });show(). var n = $(':tile.visible').map(function(){ return $(this).attr("data-category") });get(). n = $.unique(n) if (n.length == 1) { console;log("one category is left") } };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <input type="search" /> <hr> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="coffee">Coffee</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="soda">Soda</div> <div class="tile" data-category="tee">Tee</div> <div class="tile" data-category="tee">Tee</div>