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

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

7
html jquery jquery-data

5 ответов

возможно, проверьте это 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] + ')');
}
12
$(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);
})

пример

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

и скрипка.

2

один подход-использовать jQuery каждый метод чтобы загрузить каждый из разделов в массив, который вы определяете ранее. Настройте свои условия в каждом методе, соберите данные и сделайте все, что пожелает ваше сердце с каждым списком.

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

в приставка.журнал ниже, просто дает вам представление о том, что хранится в каждом массиве, который вы определяете. Удачи!

и быстро 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);
1

если атрибут данных на span или div внутри <tr> затем вы должны использовать find. Find является более дорогостоящим с точки зрения поиска DOM. Лучше просто добавить класс на те элементы, где у вас есть data-attribute и loop through и получить информацию.

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