jQuery-Funktion zu bestimmten Elementen hinzufügen

Question

Ich weiß, dass Sie neue jQuery-Funktionen hinzufügen können, indem Sie $.fn.someFunction = function()

Ich möchte jedoch nur zu bestimmten Elementen Funktionen hinzufügen. Ich habe diese Syntax ausprobiert, aber sie funktioniert nicht $('.someElements').fn.someFunction = function()

Ich möchte dies tun, damit ich die Funktion irgendwo im Code wie folgt aufrufen kann $('someElements').someFunction();

Answer 1

Pour jQuery 1.7 und später mit .on() et .trigger()

$('button').on('someFunction',function() {
    alert('go away!')
});

$('button').click(function(){
    $(this).trigger('someFunction');
});

Vor jQuery 1.7 haben wir .bind() Methode zum Anhängen von Ereignishandlern (anstelle von .on() ).

Answer 2

Damit können Sie das oben Genannte tun:

$.fn.testFn = function(){
    this.each(function(){
        var className = $(this).attr('class');
        $(this).html(className);
    });    
};

$('li').testFn(); //or any element you want

Test: http://jsfiddle.net/DarkThrone/nUzJN/

Answer 3

Yo, brauchte, um die gleiche Sache zu tun, kam mit diesem. seine nette Ursache Sie zerstören das Element und Funktion geht poof! ich denke...

var snippet=jQuery(".myElement");
snippet.data('destructor', function(){
    //do something
});
snippet.data('destructor')();

Answer 4

Die Antwort von @Reigel ist großartig! Sie könnten aber auch die $.fn Syntax und lassen Sie Ihre Funktion nur bestimmte Elemente verarbeiten:

$.fn.someFunction = function(){
    this.each(function(){
        // only handle "someElement"
        if (false == $(this).hasClass("someElement")) {
            return; // do nothing
        }

        $(this).append(" some element has been modified");

        return $(this); // support chaining
    });    
};

// now you can call your function like this
$('.someElement').someFunction();            

Siehe funktionierendes jsfiddle: http://jsfiddle.net/AKnKj/3/

Answer 5

Wenn Sie diese Funktion nur für bestimmte Selektoren benötigen, können Sie wie folgt vorgehen. Ich hatte gerade ein Szenario, in dem ich dies brauchte, und es funktioniert gut.

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
    };
})

dann können Sie später

$('.my-selector').getUrl()

ohne es als Plugin definieren zu müssen, oder Daten oder bind/on/trigger-Ereignisse zu verwenden.

Natürlich können Sie die Funktion so ändern, dass sie das enthaltende Objekt zurückgibt, wenn Sie sie in der Verkettung verwenden wollen, indem Sie this

$('.my-selector').each(function(){

    $(this).init.prototype.getUrl = function(){
        // do things
        return this;
    };
})