CODEWITHSUNDEEP
jqueryjquery-plugins
Spyros Mandekis
Spyros Mandekis

Reputation: 1024

Scope of "this" element in jquery plugins

I am trying to write a jQuery plugin to automate the filling of select boxes, but i am stumbling in the use of the this keyword in the "each" function. The code is as follows : 

(function($) { 
    $.fn.addOptionsTable2 = function() {        
    options = {
            values : text [...]
        };
        $.each(options, function(val,text) {
            this.append(
              $('<option></option>').val(val).html(text)
        );
    });
  }
})(jQuery);

This doesn't seem to work, and I believe the problem is the "this" reference. How can i make this work and also what does the "this" refer to in my code?

Upvotes: 1

Views: 179

Answers (1)

James M
James M

Reputation: 16718

$.each sets this to the current object (for the loop).

Try this:

    var that = this;

    $.each(options, function(val,text) {
        that.append(
          $('<option></option>').val(val).html(text)
    );

Upvotes: 3

Related Questions