Get the index of elements with same class

Question

Let say I have this

<ul class='list'>
  <li>item0</li>
  <li class='active'>item1</li>
  <li>item2</li>
  <li class='active'>item3</li>
  <li class='active'>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

<ul class='list'>
  <li class='active'>item0</li>
  <li>item1</li>
  <li class='active'>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li class='active'>item5</li>
  <li class='active'>item6</li>
</ul>

I'm trying to display their current index ex.(134,0256), but it displays (0123456). I tried some codes but it only display the selected index.

How can I do that?

thanks.

SAMPLE CODE

$(document).ready(function(){
        $('button').click(function(){
            $( "ul.list li.active" ).each(function(index) {
                console.log(index);
            });
        });
    });

Answer 1

The first argument in the callback would be the index in the jQuery object collection. To get index relative to its siblings use index() method.

$(document).ready(function() {
  $('button').click(function() {
    $("ul.list li.active").each(function(index) {
      console.log($(this).index()); // get index within its parent
    });
  });
});

 $("ul.list li.active").each(function(index) { console.log($(this).index()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='list'> <li>item0</li> <li class='active'>item1</li> <li>item2</li> <li class='active'>item3</li> <li class='active'>item4</li> <li>item5</li> <li>item6</li> </ul> <ul class='list'> <li class='active'>item0</li> <li>item1</li> <li class='active'>item2</li> <li>item3</li> <li>item4</li> <li class='active'>item5</li> <li class='active'>item6</li> </ul> 

---

For separating each list with a comma use additional iterator for the list, it's easy to do with jQuery map() method.

console.log(
  $("ul.list").map(function() { // iterate over each list
    return $("li.active", this).map(function() { // iterate over children li
      return $(this).index(); // return the index
    }).get().join(''); // get the result as array and join the values
  }).get().join() // get the result as array and join the values with comma
)

 console.log( $("ul.list").map(function() { return $("li.active", this).map(function() { return $(this).index(); }).get().join(''); }).get().join() ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='list'> <li>item0</li> <li class='active'>item1</li> <li>item2</li> <li class='active'>item3</li> <li class='active'>item4</li> <li>item5</li> <li>item6</li> </ul> <ul class='list'> <li class='active'>item0</li> <li>item1</li> <li class='active'>item2</li> <li>item3</li> <li>item4</li> <li class='active'>item5</li> <li class='active'>item6</li> </ul> 

Answer 2

Your selection will find all the elemnts in selection. Instead you want to find elements inside other element separately. Which I believe is only possible by searching. So your code should look like

$(document).ready(function() {
    $('button').click(function(){
        var indexes = [];
        $( "ul.list").each(function() {
            $("li", this).each(function(index) {
                 if($(this).hasClass('active') {
                     indexes.push(index);
                 }
            });
        });
        console.log(indexes);
    });
});