title: Changing a list item id according to it's current position using jQuery sortable
body: <p>I'm using jQuery UI sortable in order to make a menu sortable.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="menu" class="sortable editable"&gt;
  &lt;li class="home" id="0"&gt;
  &lt;a href="index.php?page=home"&gt;home &amp;raquo;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="news" id="1"&gt;
  &lt;a href="index.php?page=news"&gt;news &amp;raquo;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="about us" id="2"&gt;
  &lt;a href="index.php?page=about-us"&gt;about us &amp;raquo;&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.sortable &gt; li').each(function() {
       var index = $(this).index();
       $(this).attr('id', index);
  });
  </code></pre>
  
  <p>Any ideas on how I would be able to set the id to it's current position?</p>