Group and count HTML elements by data attribute in jQuery

泪湿孤枕 提交于 2019-11-28 03:38:52

问题


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:

  • 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 even possible?


回答1:


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



回答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:


May be dirty, but it's 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.




回答4:


One approach is to use jQuery's each method to load each of the sections into array you define prior. Setup your conditions within the each method, collect the data and do whatever your heart desires with each list.

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

The console.log below, simply gives you a visual on what is stored within 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);



回答5:


If data attribute is on span or div inside <tr> then you have to use find. Find is more costly in term of DOM search. Is better to just add class on that elements where you have data-attribute and loop through and get 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;
}


来源:https://stackoverflow.com/questions/15314872/group-and-count-html-elements-by-data-attribute-in-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!