Группировать и подсчитывать элементы HTML по атрибуту data в jQuery

Question

Я пытаюсь сгруппировать каждый экземпляр атрибута данных в список из числа вхождений каждого атрибута на странице с помощью 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> 

Как я могу ac hieve this в jQuery? Возможно ли это?

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

Answer 2

Один из подходов заключается в использовании jQuery's each method для загрузки каждого из разделов в массив, который вы определяете ранее. Создавайте свои условия в каждом методе, собирайте данные и делайте то, что пожелает ваше сердце, с каждым списком.

С помощью этого метода вы можете установить столько переменных внутри этого метода для каждого метода. Например, если есть еще один атрибут, который вы хотите проверить внутри каждого элемента li, вы можете сделать это и сделать больше списков.

Консоль.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); 

Answer 3

$(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 4

Может быть загрязнен, но это то, что я придумал:

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.

Answer 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; 
}