Search code examples
jquerychildren

get order of child selected jquery

I want to make different background color for ul children depending on their orders, how can I get the order of children using jquery.

<ul>
<li>a</li>
    <li>b</li>   
     <li>c</li>
     <li>d</li>
     <li>e</li>
    <li>f</li>
 </ul>

$('ul li').bind('mouseover', function(e){

    //how can I get the order of the childre
    //when hover on c it shoul returns 3
    alert("child order ");
});

here's an example http://jsfiddle.net/sHefJ/

Solution

  • For that subset of HTML, using...

    $(this).index() + 1

    jsFiddle.

    ...would be sufficient.

    I added 1 because your numbering system in your example doesn't appear to be 0 based.