Grupowanie i liczenie elementów HTML według atrybutu danych w jQuery

Question

Próbuję zgrupować każdą instancję atrybutu danych na listę na podstawie liczby wystąpień każdego atrybutu na stronie przy użyciu jQuery. Podobne do grupowania kategorii lub tagów w sekcji wiadomości.

Na przykład, chciałbym stworzyć coś takiego:

• Kategoria 1 (5)
• Kategoria 2 (3)
• Kategoria 3 (1)

od ten 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> 

Jak mogę ac uwierz to w jQuery? Czy to możliwe?

Answer 1

Jest to możliwe, sprawdź to jsFiddle, które utworzyłem.

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

Jednym ze sposobów jest użycie jQuery's each method do załadowania każdej z sekcji do wcześniej zdefiniowanej macierzy. Skonfiguruj swoje warunki w ramach każdej metody, zbieraj dane i rób wszystko, czego dusza zapragnie na każdej liście.

Za pomocą tej metody można ustawić dowolną liczbę zmiennych w każdej z tych metod, które należy sprawdzić. Na przykład, jeśli był inny atrybut, który chcesz sprawdzić w każdym elemencie li, możesz to zrobić i utworzyć więcej list.

Poniższa konsola pokaże wizualizację tego, co jest przechowywane w każdej zdefiniowanej macierzy. Powodzenia!

I szybka demonstracja 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

mogą być brudne, ale to, co wymyśliłem:

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

, a fiddle.

Answer 5

Jeśli atrybut danych jest span lub div wewnątrz <tr> następnie trzeba użyć find. Find jest bardziej kosztowne pod względem wyszukiwania DOM. Lepiej jest po prostu dodać klasy do tych elementów, w których masz atrybut danych i przechodzisz przez nie i uzyskujesz informacje.

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