jQuery pushStack फ़ंक्शन कैसे काम करता है?

Question

मुझे jQuery pushStack फ़ंक्शन को समझने में समस्या हो रही है (http://api.jquery.com/pushStack/ पर प्रलेखित)। मैंने इस पहेली में एक चयनकर्ता को वस्तुओं की एक सूची जोड़ने की कोशिश की है।

http://jsfiddle.net/johnhoffman/hTh8D/

जे एस:

$(function() { 
    var listStuff = $("p"); 
    listStuff.pushStack($("div")); 
    listStuff.css("color", "#f00");   
});​ 

HTML:

<p>foo</p> 
<div>bar</div>​ 

हालांकि, div तत्व का पाठ लाल नहीं है। किसी तत्व को jQuery स्टैक पर धक्का देने का क्या अर्थ है?

Answer 1

.pushStack() एक नया jQuery उद्देश्य यह है कि पिछले एक jQuery वस्तु से राज्य को विरासत में पैदा करता है।

यह विरासत राज्य ठीक से काम करने के लिए .end() और .self() जैसी विधियों की अनुमति देता है। अपने विशेष कोड उदाहरण में, आप .pushStack() से वापसी मान का उपयोग नहीं कर रहे हैं जो कि नई jQuery ऑब्जेक्ट है।

jQuery ऑब्जेक्ट्स के साथ काम करते समय, यह जानना महत्वपूर्ण है कि अधिकांश ऑब्जेक्ट जो डीओएम ऑब्जेक्ट्स को jQuery ऑब्जेक्ट में बदलते हैं, मौजूदा jQuery ऑब्जेक्ट को संशोधित करने के बजाय इसमें एक नया jQuery ऑब्जेक्ट बदलते हैं। यह डिज़ाइन विशेषता है जो उन्हें पहले संशोधित jQuery ऑब्जेक्ट्स के इस ढेर को बनाए रखने की अनुमति देती है।

आपके मामले में, मैं आप सभी पर .pushStack() उपयोग करने की आवश्यकता नहीं लगता कि और आप शायद सिर्फ .add() (जो भी एक नया jQuery ऑब्जेक्ट) का उपयोग कर सकते हैं लेकिन यह तुम क्या कोशिश कर रहे हैं मेरे लिए वास्तव में स्पष्ट नहीं है ऐसा करने के लिए मुझे यकीन नहीं है कि वास्तव में कौन सा कोड अनुशंसा करना है।

अंतिम परिणाम एचटीएमएल आप अपने प्रश्न में पता चला है प्राप्त करने के लिए, आप ऐसा कर सकता है:

$(function() { 
    $("p").add("div").css("color", "#f00").appendTo(document.body);   
});​ 

आप स्पष्ट रूप से जो कुछ भी आप नए डोम वस्तुओं के साथ क्या करना चाहते हैं .appendTo() बदल सकता है।

आपकी टिप्पणियों में आपने pushStack() का उपयोग करने के बारे में कुछ और पूछा। मुझे लगता है कि मुख्य उपयोग jQuery विधियों में है जो एक नई jQuery ऑब्जेक्ट लौटाता है। उस स्थिति में, आप नए jQuery ऑब्जेक्ट में इच्छित तत्वों की नई सूची बनाते हैं और फिर इसे नियमित jQuery ऑब्जेक्ट में बदलने और इसे वापस करने के बजाय, आप return this.pushStack(elems) पर कॉल करते हैं। यह एक नई jQuery ऑब्जेक्ट बनाने और इसे वापस करने के समाप्त होता है, लेकिन यह उस ऑब्जेक्ट को पिछले ऑब्जेक्ट से भी जोड़ता है ताकि .end() जैसे विशेष कमांड चेनिंग में उपयोग किए जाने पर काम कर सकें।

jQuery .add() विधि एक क्लासिक उदाहरण है। छद्म कोड में, यह क्या करता है:

add: function(selector, context) { 
    // get the DOM elements that correspond to the new selector (the ones to be added) 
    // get the DOM elements from the current jQuery object with this.get() 
    // merge the two arrays of elements together into one array 
    return this.pushStack(combinedElems); 
} 

Answer 2

आप वस्तु धक्का नहीं कर रहे हैं, इस प्रयास करें:

$(function() { 
var listStuff = $("p"); 
listStuff.css("color", "#f00");   
this.pushStack(listStuff.get()); 
});​