jQuery: Loop through elements and number the children -

i want number each span element containing list, beginning 1. continuous:

http://jsfiddle.net/qab76/125/

the markup

<li>   <span class="1"><span> </li> <li>   <span class="2"><span>   <span class="3"><span> </li> <li>   <span class="5"><span>   <span class="6"><span> </li> 

but want be:

<li>   <span class="1"><span> </li> <li>   <span class="1"><span>   <span class="2"><span> </li> <li>   <span class="1"><span>   <span class="2"><span>   <span class="3"><span> </li> 

thanks

use separate each() iterations li , span elements

$(document).ready(function () {      $("li").each(function (i) {          $(this).find("span").each(function (i) {              $(this).attr('class', (i + 1));          });      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <ul>      <li> <span>test</span>        </li>      <li> <span>test</span><span>test</span>        </li>      <li> <span>test</span><span>test</span><span>test</span>        </li>  </ul>