Changing a list item id according to it’s current position using jQuery sortable

I’m using jQuery UI sortable in order to make a menu sortable.

I’m trying to set the id of list items to their current position or index so I can later update their position values in my database. However when I use firebug to inspect the html output, the id is not changed to the index value.

So if for example if I drag li.news in front of li.home, it’s id should change to 0 and home’s id to 1.

HTML:

<ul id="menu" class="sortable editable">
<li class="home" id="0">
<a href="index.php?page=home">home &raquo;</a>
</li>
<li class="news" id="1">
<a href="index.php?page=news">news &raquo;</a>
</li>
<li class="about us" id="2">
<a href="index.php?page=about-us">about us &raquo;</a>
</li>
</ul>

jQuery

$  ('.sortable > li').each(function() {
     var index = $  (this).index();
     $  (this).attr('id', index);
});

Any ideas on how I would be able to set the id to it’s current position?

newest questions tagged jquery – Stack Overflow