jquery - jQueryでデータ属性の値をカウントする

Question

このようなリストがあります。

<li data-pet="cat"></li>
<li data-pet="cat"></li>
<li data-pet="cat"></li>
<li data-pet="dog"></li>

jQuery を使用して、同じ値が複数回表示された場合にカウントするデータ属性の値を取得するにはどうすればよいですか。

次に、その値を持つ最初のリスト要素にスパンを追加します。

結果は次のようになります。

<li data-pet="cat"><span class="first"></span></li>
<li data-pet="cat"></li>
<li data-pet="cat"></li>
<li data-pet="dog"></li>

ご協力いただきありがとうございます。

Answer 1

可能な実装

(function() {  
    var pets = {};
    $('li[data-pet]').each(function() {
        var li = $(this),
            pet = li.data('pet');

        if (!pets[pet]) {  
            pets[pet] = { firstnode: li, count : 1 }
        }
        else {
            pets[pet]['count'] = pets[pet]['count'] + 1;
        }
    });

    $.map(pets, function(obj) {     
        if (obj.count > 1) {
          obj.firstnode.append('<span class="first">'+ obj.count +'</span>');
        }
    });
}());

html

<li data-pet="cat">cat</li>
<li data-pet="cat">cat</li>
<li data-pet="cat">cat</li>
<li data-pet="dog">dog</li>
<li data-pet="elephant">elephant</li>
<li data-pet="elephant">elephant</li>

フィドルの例: http://jsfiddle.net/HJ6gF/6/

Answer 2

これの方法は次のとおりです（もちろん、状況に応じて最適化/ニートする必要があります）：

var selector = "cat";
var selectorCount = 0;

$("li[data-pet="+selector+"]").each(function() {
    selectorCount++;
});

if(selectorCount > 1) {
    $("li[data-pet="+selector+"]").each(function() {
        $(this).html("<span class=\"first\"></span>");
        break;
    });
}

Answer 3

var tarr = [];
$('li').each(function() {
   tarr.push($(this).attr('data-pet'))
});
var count = $.unique(tarr).length;

Answer 4

<li data-pet="cat"/>
<li data-pet="cat"/>
<li data-pet="cat"/>
<li data-pet="dog"/>

<script type="text/javascript">

    var dataPets = [];

    $('li').each( function( index )
    {
        if ( $.inArray( $(this).attr( "data-pet" ) , dataPets ) )
        {
            $(this).append( "First" );
        }

        dataPets[index] = $(this).attr( "data-pet" );
    });

</script>