Get the index of a nested list item

I'm trying to get the index of a nested list.

http://jsfiddle.net/5zJD8/12/

I've put an example up.

At the moment when you click a list item you get this

list item 0
  list item 0
  list item 1
list item 1
list item 2

开发者_如何学运维I want it to do this:

list item 0
  list item 1
  list item 2
list item 3
list item 4

Could someone point me in the right direction please? I hope I've explained this well enough.

Here's the code if the demo wont load, It just appends the ID when you click a list item at the moment.

$('li').click( function() {
   var liIndex = $(this).index();
    $(this).children().append(liIndex);
});

Try this:

$('li').click( function() {
   var liIndex = $(this).index('li');
    $(this).children().append(liIndex);
});

http://jsfiddle.net/5zJD8/36/

you may look for more info here : http://api.jquery.com/index/

This does the same thing, but a bit less effort:

$('li').each(function(liIndex) {
    $(this).click( function() {
         $(this).children().append(liIndex);
    });
});