通过jQuery中的数据属性对HTML元素进行分组和计数 [英] Group and count HTML elements by data attribute in jQuery

问题描述

我试图使用jQuery将每个数据属性的实例按页面中每个属性的出现次数分组成一个列表。类似于在新闻栏目中对类别或标签进行分组。

I'm trying to group each instance of a data attribute into a list from the number of occurrences of each attribute in a page, using jQuery. Similar to grouping categories or tags in a news section.

例如，我想创建类似这样的内容：

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

• 类别1（5）


• 类别2（3）


• 类别3（1）

from ：

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>

如何在jQuery中实现这个功能？这是可能的吗？

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

推荐答案

有可能，请检查 jsFiddle 我创建了。

It is possible, check this jsFiddle I've 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] + ')');
}

这篇关于通过jQuery中的数据属性对HTML元素进行分组和计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！