将jQuery函数添加到特定元素

Question

我知道你可以添加新的jQuery函数 $.fn.someFunction = function()

但是,我想只为特定元素添加函数.我尝试了这种语法,但它不起作用$('.someElements').fn.someFunction = function()

我想这样做,以便我可以在代码中的某个地方调用这样的函数 $('someElements').someFunction();

Answer 1

使用.bind()和.trigger()

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


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

从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法.

Answer 2

你可以这样做:

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

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

测试:http://jsfiddle.net/DarkThrone/nUzJN/

Answer 3

哟,需要做同样的事情,想出了这个.它很好的原因你破坏元素和功能噗!我认为...

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

Answer 4

@ Reigel的答案很棒!但是,您也可以使用$.fn语法,让您的函数只处理某些元素:

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

见工作jsfiddle:http://jsfiddle.net/AKnKj/3/

Answer 5

如果您只想为特定选择器使用此功能,以下内容将适合您.我刚刚有一个场景,我需要这个并且它很好用.

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

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

然后你可以做

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

无需将其定义为插件,或使用数据或绑定/打开/触发事件.

显然,如果要通过返回在链接中使用它,可以更改函数以返回包含对象 this

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

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

Answer 6

我实际上也有这个用例,但是有一个缓存的对象.所以我已经有了一个jQuery对象,一个可切换的菜单,我想将两个函数附加到该对象,"打开"和"关闭".这些函数需要保留元素本身的范围,就是它,所以我想this成为菜单对象.无论如何,你可以只是添加函数和变量,就像任何其他javascript对象一样.有时我会忘记这一点.

var $menu = $('#menu');
$menu.open = function(){
   this.css('left', 0);
   this.is_open = true; // you can also set arbitrary values on the object
};
$menu.close = function(){
   this.css('left', '-100%');
   this.is_open = false;
};

$menu.close();