title: Change index() value with jQuery
body: <p>I have this markup:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li id="step1"&gt;Item1&lt;a id="button1"&gt;Move down&lt;/a&gt;&lt;/li&gt;
    &lt;li id="step2"&gt;Item2&lt;a id="butto2"&gt;Move down&lt;/a&gt;&lt;/li&gt;
    &lt;li id="step3"&gt;Item3&lt;a id="button3"&gt;Move down&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to set a click() event that will move the li element at the place of the next one. </p>
  
  <p>I can retrieve an item's index with jQuery by doing this: </p>
  
  <pre><code>$("li#step1").index()
  </code></pre>
  
  <p>I'd like to be able to increment it or decrement it (2 by 2). I am trying to change it like this: </p>
  
  <pre><code>$("li#etape1").index($("li#etape1").index() + 2)
  </code></pre>
  
  <p>But it doesn't seem to be working (whenever I do this in Chrome's console, I get -1).
  How could I do this ?</p>