いくつかのjQueryオブジェクトに関数を追加するにはどうすればよいですか？

Question

のは、私が<ul>リストを持っているとしましょう：

<ul class="products"> 
    ... 
</ul> 

は、私はその後、jQueryを使ってそれを選択し、そのオブジェクトにいくつかの機能を追加したいです。たとえば、addProduct(productData)関数とdeleteProduct(productId)関数を追加したいとします。しかし、私はセレクタによって返されるオブジェクトにのみ関数を追加したいと思います。たとえば、次のようなものがあります。

var productList = $.extend($('ul.products'), { 
    addProduct: function(productData) { 
     // add a new li item 
    }, 
    deleteProduct: function(productId) { 
     // delete li with id 
    } 
}); 

jQueryを使ってどうすればいいですか？重要なポイントは、jQueryセレクタによって返されたインスタンスに関数を追加することだけです。言い換えれば、jQueryのプロトタイプを変更したり、プラグインを作成したりすることはしません。プラグインを使用すると、特定のインスタンスに関数を追加したいだけです。

Answer 1

あなただけaddProductと方法はその単一 jQueryオブジェクトに特色にしたい場合は、あなたが正常に動作します持っているもの。そのjQueryオブジェクトへの参照を保持する必要があります/ addProductとメソッドの存在を保持するために、一度しか使用しないでください。

ただし、これらのaddProductおよびメソッドは、その特定のjQueryオブジェクトに固有のものです。メソッドは作成する他のjQueryオブジェクトには存在しません。これに

var productList = $.extend($('ul.products'), { 
    addProduct: function(productData) { 
     // add a new li item 
    }, 
    deleteProduct: function(productId) { 
     // delete li with id 
    } 
}); 

// Using this particular jQuery object (productList) will work fine. 
productList.addProduct(); 
productList.removeProduct(); 

// However, addProduct() does not exist on new jQuery objects, even if they use 
// the same selector. 
$('ul.products').addProduct(); // error; [object Object] has no method 'addProduct' 

最善の方法を行うには、バック・ツー・基本-行くとjQueryオブジェクトを受け入れ、別addProductと関数を定義することです。これらの機能をul.productsセレクタでのみ機能するように制限したい場合は、これを行うことができます。それは一貫jQuery.fn APIを保つよう

function addProduct(obj) { 
    obj = obj.filter('ul.products'); 

    // do something with `obj` (its a jQuery object) 
} 

このアプローチが推奨されます。そうでない場合は、addProductとremoveProduct~を追加します。jQuery.fnインスタンスをインスタンスに追加したり、他のインスタンスでは冗長性を持たせたりします。しかし、このアプローチでは、addProductとremoveProductは常に存在しますが、使用したくない場合はanyoneになりません。

---

歴史ノート

この回答は元々のjQuery 1.7がリリースされた2011年11月に書かれました。それ以来、APIはかなり変更されています。上記の答えは 2.0.0バージョンのjQueryに関連しています。前1.9へ

、少し使用される方法は、あなたがしようとしている（しかし、あなたはあなたのアプローチを変更しない限り、あなたを助けにはなりません）何に関連である、存在するのに使用jQuery.subと呼ばれます。これにより、新しいjQueryコンストラクタが作成されます。

var newjQuery = jQuery.sub(); 
newjQuery.fn.addProduct = function() { 
    // blah blah 
}; 
newjQuery.fn.deleteProduct = function() { 
    // blah blah 
}; 

var foo = newjQuery('ul.products'); 
foo.deleteProduct(); 
foo.addProduct(); 

var bar = jQuery('ul.products'); 
bar.deleteProduct(); // error 
bar.addProduct(); // error 

はしかし注意してください、$メソッドの別名ではなくnewjQueryインスタンスよりも、古いjQueryオブジェクトを参照します。

jQuery.subが1.9でjQueryから削除されました。今すぐ利用可能ですas a plugin。

Answer 2

次のように独自のjQueryのメソッドを行うことができます。

$.fn.addProduct = function(){ 
    var myObject = $(this); 
    // do something 
} 

// Call it like: 
$("ul.products").addProduct(); 

あなたがリストに非常に具体的な方法を作っているので、これはしかし少しトリッキーです。したがって、オブジェクトの型のチェックを少なくとも追加し、現在のオブジェクトがあればコードを正しく処理する必要があることを確認するために、入力要素としましょう。

代わりに、リストをパラメータとして受け取る通常のJavascriptメソッドを作成することもできます。あなたはより多くのリスト固有の方法を作ることができます。

Answer 3

DOMオブジェクトに関数を追加したいと思います。スクリプト上

$(function(){ 
    // [0] gets the first object in array, which is your selected element, you can also use .get(0) in jQuery 
    $("#test")[0].addProduct = function(info){ 
     alert("ID: " + this.id + " - Param: " + info); 
    }; 


    $("#test")[0].addProduct("productid"); 
}); 

は、 "IDを：テスト - のParam：ProductIDの" 警告ウィル

ライブ例：http://jsfiddle.net/jJ65A/1/

または通常のjavascript

$(function(){ 
    document.getElementById("test").addProduct = function(info){ 
     alert(info); 
    }; 
}); 

Answer 4

私は、デリゲートを使用しているかもしれないと思いますin jQuery：

$(".parentclass").delegate("childclass","eventname",function(){});