Question

I have list like this.

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

Using jQuery how can I grab the value of the data-attributes to count if the same value appears more than once.

I then want to append a span to first list element with that value.

Result should look like this.

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

Thanks for your help.

Answer 1

a possible implementation

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

Example fiddle: http://jsfiddle.net/HJ6gF/6/