Group and count HTML elements by data attribute in jQuery

Question

I am trying to group each instance of a data attribute into a list of the number of occurrences of each attribute on a page using jQuery. Like grouping categories or tags in a news section.

For example, I would like to create something like this:

• Category 1 (5)
• Category 2 (3)
• Category 3 (1)

from this html:

<ul class="categories"> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category="category-2">Category 2</li> <li data-category="category-2">Category 2</li> <li data-category="category-2">Category 2</li> <li data-category="category-3">Category 3</li> </ul> 

How can I achieve this in jQuery? Is it possible?

Answer 1

Perhaps check out this jsFiddle I created.

 var categories = {}, category; $('.categories li[data-category]').each(function(i, el){ category = $(el).data('category'); if (categories.hasOwnProperty(category)) { categories[category] += 1; } else { categories[category] = 1; } }); // print results for(var key in categories){ console.log(key + ' (' + categories[key] + ')'); } 

Answer 2

 $(function() { var categories = {}; $(".categories li").each(function() { var category = $(this).data("category"); if (categories.hasOwnProperty(category) === false) { categories[category] = 1; } else { categories[category]++; } }); console.log(categories); }) 

Example

Answer 3

It may be dirty, but this is what I came up with:

 var iterate = 1; $('ul.categories li').each(function (i, v) { var thisCat = $(v).data('category'); if ($('div#' + thisCat).length > 0) { $('div#' + thisCat).text(thisCat + ' (' + ++iterate + ')'); } else { iterate = 1; var newDiv = '<div id="' + thisCat + '">' + thisCat + ' (1)</div>'; $('#result').append(newDiv); } }); 

And fiddle .

Answer 4

One approach is to use jQuery of each method to load each of the sections into an array that you define earlier. Create your conditions in each method, collect data and do what your heart desires with each list.

With this method, you can set as many variables inside this method for each method. For example, if there is another attribute that you want to check inside each li element, you can do this and make more lists.

The .log console below simply gives you visual information about what is stored in each array you define. Good luck

And a quick jsFiddle demo.

 var cat1 = []; var cat2 = []; var cat3 = []; $('li').each(function () { var attrvalue = $(this).attr('data-category'); if (attrvalue == "category-1") { cat1.push(attrvalue); } if (attrvalue == "category-2") { cat2.push(attrvalue); } if (attrvalue == "category-3") { cat3.push(attrvalue); } }); console.log('how many are here? :'+ cat1); console.log('how many are here? :'+ cat2); console.log('how many are here? :'+ cat3); 

Answer 5

If the data attribute is on the span or div inside the <tr> , then you should use find . find is more expensive in terms of finding the DOM. It’s better to just add the class to those elements where you have a data attribute, and skip and get the information.

 /* * fetch labels from list by data attribute * */ function fetch_labels() { var leadssource = {}, lead; $('#leads-list tr').each(function(i, el) { lead = $(el).find('[data-leadsource]').data('leadsource'); if (leadssource.hasOwnProperty(lead)) { leadssource[lead] += 1; } else { leadssource[lead] = 1; } }); return leadssource; }