Question

<div id="container">
  <div class="aa"></div>
  <div class="bb"></div>
  <div class="aa"></div>
  <div class="bb"></div>
  <div class="bb"></div>
  <div class="bb"></div>
  <div class="bb"></div>
</div>

i just need to find the index of element based on particular class while looping.

Normal index will give the element index no: among the siblings.
I want to consider siblings with same class only, and give the index based on that sorted siblings.

$("#container div").each(function(){

    if($(this).hasClass('bb')){
        var index = $(this).index();
            //will give me 1,3,4,5 etc

        //I want 0,1,2 etc ie: list the index based on class 

      }
    if($(this).hasClass('aa')){
           var index = $(this).index();

            //will give me 0 , 2
      //I want 0,1 etc ie: list the index based on class 
      }

})

Answer 1

For .index() you can pass a selector as a parameter (for example '.bb').

As you can find in the online documentation.

If a selector string is passed as an argument, .index() returns an
integer indicating the position of the original element relative to
the elements matched by the selector. If the element is not found,
.index() will return -1.

So you could do something like:

$("#container div").each(function(i){

    if($(this).hasClass('bb')){
        var index = $(this).index('.bb');
    }
    else if($(this).hasClass('aa')){
        var index = $(this).index('.aa');
    }

});

jsFiddle Demo