7

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でこれを達成するにはどうすればよいですか? それは可能ですか？

4

5 に答える 5

15

私が作成したこの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] + ')');
}
于 2013-03-09T19:55:44.190 に答える
4 
$(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);
})

例

于 2013-03-09T19:43:16.060 に答える
2

汚れているかもしれませんが、それは私が思いついたものです：

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

そして、フィドル。

于 2013-03-09T19:46:44.237 に答える
1

1 つの方法は、jQuery のeach メソッドを使用して、前に定義した配列に各セクションをロードすることです。各メソッド内で条件を設定し、データを収集して、各リストで必要なことを行います。

このメソッドを使用すると、各メソッド内でチェックする変数をいくつでも設定できます。たとえば、各 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);
于 2013-03-09T19:41:42.357 に答える
0

データ属性が onspanまたはdivinside の<tr>場合は、 を使用する必要がありますfind。FindDOM 検索に関しては、よりコストがかかります。データ属性を持つ要素にクラスを追加し、ループして情報を取得することをお勧めします。

/*
 * 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;
}
于 2016-10-12T06:03:26.253 に答える