jQuery AJAX referencing $(this) within success function

Question

I have a voting system which sends an id of the clicked item to a PHP script, the PHP updates the database and echos back the new vote counts via an JSON encoded array.

This is the jQuery:

$(".vote_up").click(function(){
    var id = this.id;
    var vote = $(this).attr("class");
    var data = "id=" + id + "&vote=" + vote;
    $.ajax
        ({
            type: "POST",
            url: "vote.php",
            data: data,
            cache: false,
            success: function(data)
            {
                for(var x in data) {
                         $(".votes_up").find(id).html(data[x].vote_up);
                         $(".votes_down").find(id).html(data[x].vote_down);
                }
            }
    });
});

So when i construct the item in the first place, i take the record ID in the database and set it as the items ID. So what i'm trying to do is reference the exact item that was clicked and set it's HTML to the data thats coming back from the PHP. I've checked in Firebug and I'm getting correct data back but the count of votes isnt changing. Any ideas?

This is the PHP for reference:

$query = "SELECT vote_up, vote_down FROM posts WHERE id = '".$id."'";
$result1 = mysql_query($query);
$output = Array();
while ($row = mysql_fetch_array($result1)){
    $output[] = Array(
        "vote_up" => $row['vote_up'],
        "vote_down" => $row['vote_down'],
    );
}
echo json_encode($output);

Answer 1

If you just want this in the success: callback to refer to the element that was clicked, just set the context: property for the AJAX request.

$.ajax({
        context: this,  // set the context of the callbacks
        type: "POST",
        url: "vote.php",
        data: data,
        cache: false,
        success: function(data) {
           // now "this" refers to the element that was clicked
        }

You can test it by doing something a little more generic, like:

$(this).html("yep, it works");

... then if that works, consider that it doesn't really make sense to do .html() on the same element in a loop, because each time .html() overwrites the entire content.

Use .append() instead if you're appending data from the loop:

for(var x in data) {
         $(this).append(data[x].vote_up);
         $(this).append(data[x].vote_down);
}

Answer 2

Wouldn't:

$(".votes_up").find(id).html(...);

Really just need to be:

$('#' + id).html(..);