Can't access javascript class from within jquery function

Question

I have this function inside of a javascript class:

this.checkSections = function(){
        jQuery('#droppable #section').each( function() {
            nextId = jQuery(this).next().attr('id');
            if (nextId != 'small' && nextId != 'large'){
                jQuery(this).remove();
                this.sections --;
                this.followArticles = 0;
            }else{
                articles = 0;
                obj = jQuery(this).next();
                while (nextId == 'small' || nextId == 'large'){
                    articles++;
                    obj = obj.next()
                    nextId = obj.attr('id');
                    //alert(nextId);
                }
                this.followArticles = articles;
                alert(this.sections);
            }
        });
    }

the alert(this.sections); (last lines) gives output of undefined although the sections is defined and used.

what could be the problem?

Answer 1

this is always a local variable and therefore it is overwritten in every function.

What you might do is pointing to your class eg var myClass = this; and use myClass instead of this .

 this.checkSections = function(){

    var myClass = this;

    jQuery('#droppable #section').each( function() {
        nextId = jQuery(this).next().attr('id');
        if (nextId != 'small' && nextId != 'large'){
            jQuery(this).remove();
            myClass.sections --;
            myClass.followArticles = 0;
        }else{
            articles = 0;
            obj = jQuery(this).next();
            while (nextId == 'small' || nextId == 'large'){
                articles++;
                obj = obj.next()
                nextId = obj.attr('id');
                //alert(nextId);
            }
            myClass.followArticles = articles;
            alert(myClass .sections);
        }
    });
}