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.

For sure, there is .length in jquery if you want to get the length of all elements, but to get the count of different categories you need to loop through and accumulate. — Mina
– Mina, Commented Oct 3, 2022 at 12:08

Carsten Løvbo Andersen · Accepted Answer · 2022-10-03 12:16:44Z

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>

answered Oct 3, 2022 at 12:16

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

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

1 Comment

toffler Over a year ago

Thank you, seems I was looking for the $.unique() . :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related