在jquery中使用兄弟姐妹的正确方法？

Question

I am having an ajax function that returns updated value from the database. It is implemented under the click event of a certain button.

DIV :

<div class="rep">
  <div class="up_arrow"></div>
  <div class="rep_count"></div>
</div>

There are about 10 same divs repeating on a page. up_arrow is where the user will click.

I am trying to update the data in rep_count and also change the class of up_arrow to up_arrowed .

SUCCESS Function of Ajax :

success: function(data){
  $(this).addClass('.up_arrow').removeClass('.up_arrowed');
  $(this).css('background-position','0 40px');
  $(this).next('.rep_count').html(data);
}

This success function is a part of ajax function which is invoked on a click function and thats the reason i'm using this to refer to its siblings. This is not doing what i'm expecting. I tried using siblings instead of next but that too is not doing the magic.

Thanks for your help in advance.

EDIT : The Click function :

$('.up_arrow').each(function() {
    $(this).click(function(event) {

        var resid = $(this).attr('name');

        var post_data = {
            'resid' : resid,
            '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
        };

        if(resid){
            $.ajax({
                type: 'POST',
                url: "/ci_theyaw/restaurants/plusrepo",
                data: post_data,
                success: function(data){
                    //console.log($(this).siblings('.rep_count').text());
                    $(this).addClass('.up_arrow').removeClass('.up_arrowed');
                    //$(this).css('background-position','0 40px');
                    //$(this).next('.rep_count').html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    console.log(xhr.responseText);
                    alert(thrownError);
                }
            });
        }
    });
});

Answer 1

this inside the success handler does not refer the same object as it was referring outside the ajax call.

One solution is to use a closure variable self which is referring the clicked element and then use it in the success handler. Also there are few other changes

//there is no need to use .each() here
$('.up_arrow').click(function () {
    var resid = $(this).attr('name');
    var post_data = {
        'resid': resid,
            '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
    };

    var self = this;
    if (resid) {
        $.ajax({
            type: 'POST',
            url: "/ci_theyaw/restaurants/plusrepo",
            data: post_data,
            success: function (data) {
                //console.log($(this).siblings('.rep_count').text());

                //you had swapped the class names here also should not use . in front of the class name, it is used only for class selector
                $(self).addClass('up_arrowed').removeClass('up_arrow');
                //$(this).css('background-position','0 40px');
                //$(this).next('.rep_count').html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                console.log(xhr.responseText);
                alert(thrownError);
            }
        });
    }
});

Another solution is to use $.proxy as shown below to pass a custom context

success: $.proxy(function(data){
  $(this).addClass('.up_arrow').removeClass('.up_arrowed');
  $(this).css('background-position','0 40px');
  $(this).next('.rep_count').html(data);
}, this)

Answer 2

You need to pass the item the user clicked on to the success function. I would change your code to this:

$('.up_arrow').click(function() {
    //you don't need an .each() loop to bind the events    

    var TheClickedItem = $(this);
    .......

    success: function(data){ 
       //now you're accessing/modifying the item that was actually clicked.
       TheClickedItem.addClass('.up_arrow').removeClass('.up_arrowed');
       TheClickedItem.....
    }

Answer 3

The problem is that this does not refer to the clicked element inside the success callback.

Use the context option in $.ajax to specify what you need as this inside the success callback.

$.ajax({
    ...
    context: $(this), // now the clicked element will be `this` inside the callback
    ...
    success: function(data) {
        // here 'this' refers to the clicked element now
    },
    ...
});

Answer 4

You need to save this in onclick context, because in ajax-success function this refers to other context. You should do something like this:

$('.up_arrow').on('click', function() {
    var self = this; // save this refering to <a>
    $.ajax(.....,
        success: function() {
           // this - refers to success-function context, but self - refers to 'a'-onclick handler
            $(self).addClass('.up_arrow').removeClass('.up_arrowed');
            $(self).css('background-position','0 40px');
            $(self).next('.rep_count').html(data);     
        }
    )
})