CODEWITHSUNDEEP
jquery
Body
Body

Reputation: 3688

Add incremental data attr value based on class name

I have some <li>s with class names as follows;

<li class="2014" data-order=""></li>
<li class="2014" data-order=""></li>
<li class="2013" data-order=""></li>
<li class="2013" data-order=""></li>
<li class="2013" data-order=""></li>
<li class="2012" data-order=""></li>

I need a jQuery function to add values to each an every <li> element's data-order. Value has to be set as follows. 

<li class="2014" data-order="1"></li>
<li class="2014" data-order="2"></li>
<li class="2013" data-order="1"></li>
<li class="2013" data-order="2"></li>
<li class="2013" data-order="3"></li>
<li class="2012" data-order="1"></li>
<li class="2011" data-order="1"></li>

data-order will start from one. When multiple <li> having the same class, the data-order will start incrementing by 1.

Upvotes: 1

Views: 450

Answers (2)

writeToBhuwan
writeToBhuwan

Reputation: 3281

var arrayOfClasses=[];

$('li').each(function(){
    var elementsClass=$(this).attr('class');
    if($.inArray(elementsClass,arrayOfClasses)==-1){
        arrayOfClasses.push(elementsClass);
    }
});

for(var i in arrayOfClasses){
    var className=arrayOfClasses[i];
    var count=0;
    $('li').each(function(){
        if($(this).hasClass(className)){
            count=count+1;
            $(this).attr('data-order',count);
        }
    });
}

JSBIN

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

DEMO

var $ord = $('[data-order]');

$ord.each(function(){
  var $ordSib = $('.'+ this.className );
  return $(this).data('order', $ordSib.index(this)+1 );
});

Using .index( this ) method from a jQuery elements Array collection will return the index position of that element. For index is '0' based you just need to increment than by 1

Upvotes: 2

Related Questions