jQuery this inside each loop

Question

Inside the initialize() function there is a jQuery each loop. Inside that loop is a reference to this.dbcolumns which is obviously not working as jQuery has reassigned this to the current loop element. So how can I reference this.dbcolumns from inside the loop? It works outside the loop ok.

function datatable() {
    this.url = '';
    this.htmltable = '';
    this.dbtable = '';
    this.dbcolumns = new Array();
    this.idfield = 'id';
    this.pageno = 0;
    this.pagesize = 15;
    this.totalpages = 0;
    this.totalrecords = 0;
    this.searchterm = '';

    this.initialize = function() {
        this.dbtable = $(this.htmltable).attr('data-table');
        this.dbcolumns.push(this.idfield);
        $(this.htmltable + ' th[data-field]').each(function(i, col){
            this.dbcolumns.push( $(col).attr('data-field') ); /* <<<<<<<<<< this line */
        });
        return this;
    }
}

Side note: function expressions should have a trailing semicolon. — pimvdb
– pimvdb, Commented Jun 17, 2012 at 10:03

Caleb · Accepted Answer · 2012-06-17 10:02:45Z

14

make a reference to the "this" that you want to hold onto outside of the loop.

var self = this;

then you can use "self" inside the loop.

answered Jun 17, 2012 at 10:02

Caleb

1,0987 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Allardice · Accepted Answer · 2012-06-17 10:03:04Z

4

Store a reference to this outside the each callback, or use the ES5 bind method:

$(this.htmltable + ' th[data-field]').each(function(i, col){
     this.dbcolumns.push( $(col).attr('data-field') );
}.bind(this));

Or, as noted in the comments use $.proxy:

$(this.htmltable + ' th[data-field]').each($.proxy(function(i, col){
     this.dbcolumns.push( $(col).attr('data-field') );
}, this));

answered Jun 17, 2012 at 10:03

James Allardice

166k22 gold badges335 silver badges316 bronze badges

2 Comments

pimvdb Over a year ago

With jQuery it may be advisable to use $.proxy because .bind is not supported everywhere.

James Allardice Over a year ago

True. I've been working a lot with PrototypeJS recently (which shims bind for you), so I keep mixing up jQuery patterns and Prototype patterns.

bjornd · Accepted Answer · 2012-06-17 10:04:08Z

3

The common JS pattern to solve is to use closure:

this.initialize = function() {
    var that = this;

    this.dbtable = $(this.htmltable).attr('data-table');
    this.dbcolumns.push(this.idfield);
    $(this.htmltable + ' th[data-field]').each(function(i, col){
        that.dbcolumns.push( $(col).attr('data-field') ); /* <<<<<<<<<< this line */
    });
    return this;
}

answered Jun 17, 2012 at 10:04

bjornd

23k4 gold badges59 silver badges74 bronze badges

Collectives™ on Stack Overflow

jQuery this inside each loop

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related