jQuery extension: why does it not work on all matching elements?

Question

I have an extension going like:

$.fn.crazything = function() {
    var self = $(this);
    // do some crazy stuff
    return self;
}

And when I call it like:

$("div.crazydiv").crazything();

It works, but only on the first matching div. If I have more than one div on the page, I need to do:

$("div.crazydiv").each(function(i) { $(this).crazything (); });

Why is this, and how can I rewrite my extension to work on multiple divs?

Answer 1

Most jQuery plugins use this pattern which handles your crazy stuff:

(function($) {
  $.fn.crazything = function() {
    // allow setup on jQuery objects that conatin multiple elements:
    return this.each(function() {
      // this function is called once for each element in the jQuery object
      var self = $(this);
      // do some crazy stuff
    });
  };
})(jQuery);