accessing $(this) later in code
<p>I am using ajax to make a small voting app. When you click +1 to vote up an item the following code runs, adding one to its vote count then the php returns a reordered list of items by votes. What I want is the voted up item to turn green. The code to change the colour will have to run after the items have been reordered and retrieved. </p>

<p>Below is one the block of code. Text in between is discussing what that particular part is doing. </p>

<pre><code>$(function(){
  $(".plus").live('click', function() {
      var plus = $(this).data('plus');
      var dataString = "plus="+plus;
</code></pre>

<p>The next line of code gets the parent element of the clicked button with class <code>.heading</code> and animates its background colour to green to show it has been voted up. This works fine except that you only see it for a second because on success of item being voted up they are retrieved and output again to reorder them by votes. </p>

<pre><code>$(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100);

        $.ajax({
      type: "POST",
      url: "bin/processButtons.php",
      data: dataString,
      success: function() {

        $.ajax({url: 'retrieve.php', dataType: 'json'}).done(function(data) {


            var html = data['html'];
            $('#content')
                .html(data['html'])
</code></pre>

<p>What I want to do is move the line of code to here so that it animates the colour AFTER the items have been voted up and then retrieved. This it no longer works because the <code>$(this)</code> needs to be done on the button just after it has been clicked.</p>

<pre><code> $(this).parents(".itemheading").stop().animate({ backgroundColor: "#cdeb8b"}, 100); 
    });
      }
     });
    return false;
    });
});
</code></pre>

<p>Thanks. </p>
