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>

我如何在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

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

可能很脏，但这是我想出的：

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 4

一种方法是使用jQuery的each method将每个部分加载到之前定义的数组中。在每种方法中设置您的条件，收集数据并根据每个列表做您想要的任何事情。

使用此方法，您可以在每个方法中设置多个变量以进行检查。例如，如果您想在每个li元素中检查另一个属性，则可以执行此操作并生成更多列表。

下面的console.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 5

如果数据属性位于span内div或<tr>内，则必须使用find。在DOM搜索方面，Find的成本更高。最好只在具有数据属性的元素上添加类，然后循环并获取信息。

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

按jQuery中的data属性对HTML元素进行分组和计数

5 个答案: