jQuery Plugin Return this.each and add function property to each object?

Is it possible to create a jQuery plugin that returns this.each for multiple matches allowing me to add a function property to each object within the each loop? I want to call this function later directly off of the object.

For example, here's a simplified version of what I'm trying to do:

(function ( $ ) {
  $.fn.roflcopter = function( options ) {

    return this.each(function() {
        $(this).addClass('lol');
        $(this).getMyValue = function(e){
            return returnMyFilteredValue($(this));
        }
    });

    function returnMyFilteredValue(elem){
        return $(elem).val().replace("cat", "dog");
    }

  };
}( jQuery ));

I then want to in a document.ready function call this:

$("input.coolStuff").roflcopter();
var value = $("input.coolStuff").first().getMyValue();

Is this possible? I get an error stating that getMyValue is not a function.

Answers 1

  • Minor change: just place getMyValue on 'this' and not on $(this) and access it by

    $("input.coolStuff").first()[0].getMyValue()
    

Related Articles