jquery - Get index of li in multiple parents -

i have loop through elements in each li. i'm trying find index of each el relative group-fields div. have array of el's inside each li tag.

for (var = 0; < arr.length; i++) {       var el = arr[i];       var li = el.closest('li');       console.log( "li index =", li.index() ); } 

the above giving me index relative each parent index of each li inside col-1 , index of each li inside of col-2. want know index of each element in relation top element group-fields.

loose html example:

<div class="group-fields">   <div class="col-1">     <ul>       <li>         <input>el</input>       </li>       <li>         <input>el</input>       </li>       <li>         <div>el</div>       </li>     </ul>   </div>   <div class="col-2">     <ul>       <li>          <div>el</div>       </li>       <li>         <input>el</input>       </li>       <li>         <input>el</input>       </li>     </ul>   </div> </div> 

you can use:

var index = $(li).closest('.group-fields').find('li').index( li ); 

below using click event demonstration purposes only:

$('li').on('click', function() {    //this how to:::    var index = $(this).closest('.group-fields').find('li').index( );    console.log( 'you clicked li index = ' + index );  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="group-fields">    <div class="col-1">      <ul>        <li>          <input>el</input>        </li>        <li>          <input>el</input>        </li>        <li>          <div>el</div>        </li>      </ul>    </div>    <div class="col-2">      <ul>        <li>           <div>el</div>        </li>        <li>          <input>el</input>        </li>        <li>          <input>el</input>        </li>      </ul>    </div>  </div>