Get the current <li> number

Question

Hi

I have a list like this one:

<ul>

  <li>
    <a href="..."> ... </a>
    <a href="..."> ... </a>
  </li>

  <li>
    <a href="..."> ... </a>
    <a href="..."> ... </a>
  </li>

  <li>
    <a href="..."> ... </a>
    <a href="..."> ... </a>
  </li>

  ...

</ul>

and the jQuery:

$("li").each(function(){
     // do stuff
});

How can I get the current list number (like 1, 2 or 3) inside that jquery function (where do stuff is)?

Answer 1

jQuery passes it as an argument:

$('li').each(i, li) {
  // i is the counter (starts at zero)
});

(hold on while I make sure that's the right order; i always get confused b/c "$.map()" is different!)

yup that's it, index then element.

Answer 2

The callback function passed to each has two arguments, the first being the index you're looking for:

$('li').each(function(index, value) {
  // index is what you're looking for
});

Have a look at the documentation for each:

the callback is passed an array index and a corresponding array value each time.

Note that the index will be zero-based, so if you want your "1, 2, 3..." (from your question), you'll need to make the appropriate accommodations.

Answer 3

Per the jQuery documentation, you can include a callback within the function (as below):

$('li').each(function(index, value) { 
  alert('li #' + index); 
});