在 jQuery 中按数据属性对 HTML 元素进行分组和计数

Posted 2023-05-08

【中文标题】在 jQuery 中按数据属性对 HTML 元素进行分组和计数

【英文标题】：Group and count HTML elements by data attribute in jQuery

【发布时间】：2013-02-25 05:30:55

【问题描述】：

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

例如，我想创建这样的东西：

类别 1 (5) 类别 2 (3) 类别 3 (1)

来自这个 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 中实现这一点？有没有可能？

【参考方案1】：

有可能，请查看我创建的jsFiddle。

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] + ')');

【参考方案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

【参考方案3】：

可能很脏，但这是我想出的：

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);
    
);

还有，fiddle。

【参考方案4】：

一种方法是使用 jQuery 的 each method 将每个部分加载到您之前定义的数组中。在每种方法中设置您的条件，收集数据并对每个列表做任何您想做的事情。

使用此方法，您可以在每个方法中设置尽可能多的变量来检查。例如，如果您想在每个 li 元素中检查另一个属性，您可以这样做并创建更多列表。

下面的 console.log 只是让您直观地了解您定义的每个数组中存储的内容。祝你好运！

还有一个快速的jsFiddle 演示。

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);

【讨论】：

不错的努力，但这似乎有点静态。您必须手动管理每个类别。

哈！我同意。我很久以前写过这篇文章，现在会更有效地做事。

【参考方案5】：

如果数据属性在span 或div 内<tr> 上，那么您必须使用find。 Find 在 DOM 搜索方面成本更高。最好只在具有数据属性的元素上添加类并循环并获取信息。

/*
 * 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;