jQuery index() returning the same value after dynamic change in list
<p>i have the following piece of HTML</p>

<pre><code>&lt;a id="zoom" href="..."&gt;zoom current artwork&lt;/a&gt;

&lt;div id="album-artwork"&gt;
   &lt;ul&gt;
      &lt;li&gt;&lt;a class="current"&gt;image 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;image 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;image 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;image 4&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;image 5&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>when i click the link with the id 'zoom', i want to get the index in the 'album-artwork' list that contains the tag 'a' with the class 'current'. So i did the following in jQuery and it works perfectly!</p>

<pre><code>// ZOOM artwork
$("#zoom").click(function(e) {

   // highlight
   var index = $('#album-artwork ul li a.current').index();
   alert(index);

   e.preventDefault();
}
</code></pre>

<p>Now, this is were it doesn't work! When i run another jQuery code to change the class in the tag 'a' in 'album-artwork'... like this:</p>

<pre><code>$('#album-artwork a').click(function(e) {   

   // add decoration
   $("#album-artwork a").removeClass('current');
   $(this).addClass("current");

   e.preventDefault();
});
</code></pre>

<p>the previous code, the one that gets the index with the tag 'a' with a class 'current', keeps returning the same value... as if it doesn't see that i've just the change the class 'current' in the tag 'a'</p>

<p>Why is that? How come it doesn't see the changes?</p>

<p>Thanks</p>
