कुछ 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 वस्तु पर सुविधा के लिए चाहते हैं, तो क्या तुम ठीक से काम करेंगे मिल गया है; लेकिन addProduct और विधियों के अस्तित्व को संरक्षित रखने के लिए आपको उस jQuery ऑब्जेक्ट का संदर्भ रखना होगा/केवल इसका उपयोग करना होगा।

हालांकि, इन 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' 

सबसे अच्छा तरीका ऐसा करते हैं करने के लिए जाने-बैक-टू-मूल बातें करने के लिए और अलग addProduct और काम करता है, जो एक jQuery वस्तु को स्वीकार परिभाषित किया जाएगा। यदि आप इन कार्यों को प्रतिबंधित करना चाहते हैं तो वे केवल ul.products चयनकर्ता पर काम करते हैं, आप कर सकते हैं;

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

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

यह दृष्टिकोण के रूप में यह jQuery.fn एपीआई संगत रहता है की सिफारिश की जाएगी; अन्यथा आप addProduct और removeProduct से कुछjQuery.fn उदाहरणों पर नहीं बल्कि अन्य लोगों को, या दूसरों में उनका उपयोग अनावश्यक जोड़ देंगे। इस दृष्टिकोण के साथ हालांकि addProduct और removeProduct हमेशा वहां रहते हैं, लेकिन अगर वे उनका उपयोग नहीं करना चाहते हैं तो किसी भी तरह से न आएं।

---

ऐतिहासिक नोट्स

इस उत्तर मूल रूप से नवंबर 2011 में, जब jQuery 1.7 जारी किया गया था में लिखा गया था। तब से एपीआई काफी बदल गया है। उपर्युक्त उत्तर jQuery के वर्तमान 2.0.0 संस्करण के लिए प्रासंगिक है।

पहले 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 

हालांकि सावधान रहो, $ विधि उर्फ ​​वर्ष jQuery वस्तु संदर्भ होता है, बल्कि newjQuery उदाहरण से।

jQuery.sub को jQuery से 1.9 में हटा दिया गया था।अब यह as a plugin उपलब्ध है।

Answer 2

आप इस प्रकार अपने स्वयं के jQuery तरीकों बना सकते हैं:

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

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

यह हालांकि थोड़ा मुश्किल है, क्योंकि आप तरीकों कि सूची में अलग होते हैं कर रहे हैं। इसलिए, यह सुनिश्चित करने के लिए कि आपको कम से कम ऑब्जेक्ट के प्रकार पर कुछ जांच जोड़नी चाहिए और यदि मौजूदा ऑब्जेक्ट है तो कोड को सही तरीके से संभाल लें, आइए इनपुट इनपुट कहें।

एक वैकल्पिक जावास्क्रिप्ट विधि बनाने का विकल्प है जो सूची को पैरामीटर के रूप में प्राप्त करता है। इस तरह आप एक और सूची विशिष्ट विधि बना सकते हैं।

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"); 
}); 

स्क्रिप्ट से ऊपर सचेत wil "ID: परीक्षण - परम: productId"

एक लाइव उदाहरण: http://jsfiddle.net/jJ65A/1/

या सामान्य जावास्क्रिप्ट

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

Answer 4

मुझे लगता है कि हो सकता है सिर्फ प्रतिनिधि का उपयोग किया jQuery में:

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