jQuery Plugin Geben Sie dieses Objekt zurück und fügen Sie jedem Objekt eine Funktionseigenschaft hinzu?

Question

Ist es möglich, ein jQuery-Plugin zu erstellen, das this.each für mehrere Übereinstimmungen zurückgibt und es mir erlaubt, jedem Objekt in jeder Schleife eine Funktionseigenschaft hinzuzufügen? Ich möchte diese Funktion später direkt vom Objekt aufrufen.

Zum Beispiel, hier ist eine vereinfachte Version von dem, was ich versuche zu tun: diese in einem document.ready Funktionsaufruf

(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)); 

Ich möchte dann:

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

Ist das möglich ? Ich bekomme eine Fehlermeldung, dass getMyValue keine Funktion ist.

Answer 1

Geringfügige Änderung gesetzt: nur Platz getMyValue auf 'this' und nicht auf $ (dies) und Zugang von

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

Answer 2

Sie können .data() verwenden, um eine Funktion an einem Element zu speichern und aufzurufen; Function.prototype.bind()this zu $(this) innerhalb .each() bei getMyValue

$(function() { 
 
    (function($) { 
 
    $.fn.roflcopter = function(options) { 
 
     return this.each(function() { 
 
     $(this).addClass("lol"); 
 
     function getMyValue(e) { 
 
      return returnMyFilteredValue(this); 
 
     }; 
 
     $(this).data().getMyValue = getMyValue.bind($(this)); 
 
     }); 
 

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

 
    }; 
 
    }(jQuery)); 
 

 
    $("input.coolStuff").roflcopter(); 
 
    var value = $("input.coolStuff").first().data().getMyValue(); 
 
    console.log(value, value.val()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input class="coolStuff" value="cat" /> 
 
<input class="coolStuff" value="cat" />