Count values of data-attribute with jQuery

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.

Fabrizio Calderan · Accepted Answer · 2012-04-16 15:24:42Z

3

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/

edited Apr 16, 2012 at 15:24

answered Apr 16, 2012 at 15:15

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jamjam Over a year ago

Excellent. Including the total was nice touch. I will also that aswell. Thanks.

Fabrizio Calderan Over a year ago

I changed a bit the implementation so the code is more performant - no real need to read a selection of li nodes inside $.map function.

Ropstah · Accepted Answer · 2012-04-16 15:02:15Z

0

A way for this would be (you should optimize/neaten it according to your situation ofcourse):

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

answered Apr 16, 2012 at 15:02

Ropstah

17.9k27 gold badges123 silver badges199 bronze badges

3 Comments

Selvakumar Arumugam Over a year ago

Why do you need a .each when you just .length on selector?

jamjam Over a year ago

Thanks for your answer. Two problems. First there is syntax error and also why variable called "cat". I want get all data-attributed regardless of value and then count them to determine if there is more than once occurrence of it.

Ropstah Over a year ago

@jamjam: Hence the "you should optimize/neaten it according to your situation". You aren't providing any context information on your issue so I was unable to tailor the code to your needs. You should be able to deduct what you need to change from this code...

thecodeparadox · Accepted Answer · 2012-04-16 15:02:18Z

0

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

answered Apr 16, 2012 at 15:02

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

Aaron Over a year ago

From the jQuery API Docs: "Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers."

Jonathan Payne · Accepted Answer · 2012-04-16 15:09:49Z

0

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

answered Apr 16, 2012 at 15:09

Jonathan Payne

2,22313 silver badges11 bronze badges

Collectives™ on Stack Overflow

Count values of data-attribute with jQuery

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related