Nhóm và đếm các phần tử HTML theo thuộc tính dữ liệu trong jQuery

Question

Tôi đang cố nhóm từng cá thể thuộc tính dữ liệu vào danh sách từ số lần xuất hiện của mỗi thuộc tính trong một trang, bằng cách sử dụng jQuery. Tương tự như nhóm các danh mục hoặc thẻ trong phần tin tức.

Ví dụ, tôi muốn tạo ra một cái gì đó như thế này:

• loại 1 (5)
• loại 2 (3)
• loại 3 (1)

từ html này:

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

Làm cách nào tôi có thể hieve điều này trong jQuery? Thậm chí có thể không?

Answer 1

Có thể, hãy kiểm tra điều này jsFiddle Tôi đã tạo.

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

Một cách tiếp cận là sử dụng jQuery each method để tải từng phần vào mảng mà bạn xác định trước đó. Thiết lập các điều kiện của bạn trong mỗi phương pháp, thu thập dữ liệu và làm bất cứ điều gì trái tim của bạn mong muốn với mỗi danh sách.

Với phương pháp này, bạn có thể đặt bao nhiêu biến trong mỗi phương thức này để kiểm tra. Ví dụ: nếu có thuộc tính khác mà bạn muốn kiểm tra trong mỗi phần tử li, bạn có thể thực hiện điều đó và tạo thêm danh sách.

Console.log bên dưới, chỉ đơn giản cung cấp cho bạn hình ảnh về nội dung được lưu trữ trong mỗi mảng mà bạn xác định. Chúc may mắn!

Và bản giới thiệu nhanh 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

Có thể là bẩn, nhưng đó là những gì tôi đã đưa ra:

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

Và, fiddle.

Answer 5

Nếu thuộc tính dữ liệu trên span hoặc div bên <tr> sau đó bạn phải sử dụng find. Find tốn kém hơn về mặt tìm kiếm DOM. Tốt hơn là chỉ cần thêm lớp vào các phần tử mà bạn có thuộc tính dữ liệu và lặp lại và nhận thông tin.

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