web-dev-qa-db-ja.com

特定の要素にjQuery関数を追加する

$.fn.someFunction = function()で新しいjQuery関数を追加できることを知っています

ただし、特定の要素にのみ機能を追加したいです。私はこの構文を試しましたが、機能しません$('.someElements').fn.someFunction = function()

これを行いたいので、コードのどこかでこのような関数を呼び出すことができます$('someElements').someFunction();

jqueryfunctionadd
47
user2385136

.bind() および .trigger() を使用します

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


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

JQuery 1.7以降、 。on（） メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨メソッドです。

48
Reigel

あなたはこれで上記を行うことができます：

$.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/

19
DarkThrone

ヨは、同じことをする必要がありましたが、これを思いつきました。その素敵な原因は、要素を破壊し、機能が馬鹿になります！おもう...

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

@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/

8
Friederike

特定のセレクターに対してのみこの関数が必要な場合は、次の方法が有効です。私はこれを必要とするシナリオを持っていて、うまく機能します。

$('.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;
    };
})
8
dan richardson

実際にこのユースケースもありましたが、キャッシュされたオブジェクトを使用していました。そのため、jQueryオブジェクト、トグル可能なメニューが既にあり、そのオブジェクトに「開く」と「閉じる」という2つの関数を追加したかったのです。関数は要素自体のスコープを保持する必要があり、それがそれだったので、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();
7
charltoons

最も明らかな解決策は、関数をオブジェクトのプロパティとして割り当てることです。

obj.prop("myFunc", function() {
  return (function(arg) {
    alert("It works! " + arg);
  });
});

次に、オブジェクトで次のように呼び出します。

obj.prop("myFunc")("Cool!");

注：あなたの関数は外側の関数の戻り値です： http://api.jquery.com/prop/#prop-propertyName-function を参照してください

2
Snegh

また、これがあなたに役立つかどうかは私の答えではわかりませんが、.liveを使用してみてください。

$(selector).live(click,function(){
    //some codes here
});
1
Carls Jr.