jQuery $ प्रत्येक() पैरामीटर की उत्पत्ति को समझना?

Question

कल रात jQuery कुकबुक (ओरेली) पढ़ने के दौरान मैं एक ऐसे समारोह में आया जो एक प्रश्न उत्पन्न करता है कि मुझे पुस्तक में, या ऑनलाइन में कोई जवाब नहीं मिल रहा है। कोड मैं इस सवाल के लिए उपयोग jQuery site से पाया जाता है और मैं एक संदर्भ के रूप में नीचे यह शामिल हैं:

<script> 
    $(document.body).click(function() { 
     $("div").each(function (i) {   //Where does the 'i' come from? 
     if (this.style.color != "blue") { 
      this.style.color = "blue"; 
     } else { 
      this.style.color = ""; 
     } 
     }); 
    }); 
</script> 

मैं के रूप में मैं इसे जहां देखने के लिए असफल मूल और 'मैं' पैरामीटर के प्रयोजन जानना चाहते हैं (क्लाइंट कोड) से आता है और इसके लिए क्या उपयोग किया जाता है? जावा लड़के के रूप में मैं अवधारणा को बहुत आसान समझूंगा क्योंकि मैं जावा के संदर्भ में विधि या 'फ़ंक्शन' पैरा से परिचित हूं।

यहां मुझे क्लाइंट कोड नहीं दिख रहा है (मुझे लगता है कि यह लाइब्रेरी में है) और मुझे नहीं लगता कि यह कैसे (i) फ़ंक्शन में प्रासंगिक है क्योंकि इसका संदर्भ नहीं दिया गया है।

क्या समुदाय से कोई इस के लिए स्पष्ट स्पष्टीकरण दे सकता है या मुझे इस पर एक गाइड के लिए संदर्भित कर सकता है?

मैं प्रत्येक फ़ंक्शन और 'यह' संदर्भ का उद्देश्य समझता हूं, इसलिए आपको इन्हें तब तक समझाने की आवश्यकता नहीं है जब तक कि आप इस प्रश्न के भविष्य के दर्शकों के लिए प्रासंगिक न हों।

Answer 1

उस स्थिति में, i घोषित करने की कोई आवश्यकता नहीं थी। each method के हस्ताक्षर jQuery डॉक्स में कहा गया है:

.each(function(index, Element))

आप देख सकते हैं, यह एक तर्क लेता है, और उस कथन की एक समारोह है कि 2 तर्कों, index और Element लेता है।

आपके कोड में, iindex के लिए एक पहचानकर्ता है, जिसे प्रत्येक बार jQuery द्वारा कॉलबैक फ़ंक्शन में पास किया जाता है (प्रत्येक बार प्रत्येक पुनरावृत्ति के लिए)। यह एक दूसरा तर्क भी पास करता है, लेकिन आपने इसके लिए पहचानकर्ता घोषित नहीं किया है, इसलिए यह केवल arguments ऑब्जेक्ट के माध्यम से पहुंच योग्य होगा।

आप देख सकते हैं कि वास्तव में क्या प्रवेश करने कि arguments वस्तु द्वारा कॉलबैक करने के लिए पारित कर दिया है:

​$("div").each(function() { //No arguments listed in callback signature... 
    console.log(arguments); //But arguments are still passed 
});​​ 

यहाँ ऊपर का एक working example है।

//... 
each: function(object, callback, args) { 
    //... 

    //Iterate over the matched set of elements 
    for (; i < length;) { 
     /* Call the callback in the context of the element, passing in the 
      index and the element */ 
     if (callback.call(object[ i ], i, object[ i++ ]) === false) { 
      break; 
     } 
    } 
} 

Answer 2

जब आप $().each() कहते हैं, आप इसे एक समारोह संदर्भ पारित:

यहाँ relevant code from jQuery itself (टिप्पणियां जोड़ी) है। जिस तरह से .each() फ़ंक्शन काम करता है वह है कि jQuery ऑब्जेक्ट में प्रत्येक तत्व के लिए, यह उस फ़ंक्शन को कॉल करता है जिसे आपने वर्तमान तत्व के साथ संदर्भ के रूप में दिया है (यानी फ़ंक्शन कॉल के अंदर, this चर वर्तमान तत्व है)।

अब जब jQuery आपके द्वारा दिए गए फ़ंक्शन को कॉल करता है, तो वैकल्पिक तर्कों में पास हो सकता है, जैसे कि आप कोड में फ़ंक्शन को कॉल कर रहे थे। .each() के साथ, जब भी यह आपके द्वारा दिए गए फ़ंक्शन को कॉल करता है, तो यह दो तर्कों में गुजरता है: अनुक्रमणिका और वर्तमान तत्व।

यह ऐसा है जैसे कि यह jQuery बुला रहा है है:

$('div').each(foo); 

// results in something like 
for(var i=0; i < $('div').length; i++) { 

    // calling the foo function 
    foo(i, $('div')[i]); 

    // this is simplified, of course. 
    // this doesn't take into account the function context, or "this" variable. 
} 

हो सकता है कि the official documentation बेहतर भी बताते हैं।

Answer 3

जैसा कि यह एपीआई में कहता है कि 'i' सूचकांक है।

कि उपयोगी आप के बीच भी और असमान तत्वों

की तरह एक फर्क करना चाहते हैं तो हो सकता है:

$(document.body).click(function() { 
    $("div").each(function (i) {   //Where does the 'i' come from? 
    if (i % 2 == 0) { 
     this.style.color = "blue"; 
    } else { 
     this.style.color = ""; 
    } 
    }); 
}); 

Answer 4

इन मानकों के "मूल" "देता है prototype.js से अलग हो । "
यह विपरीत क्रम में पैरा को पारित करने के लिए और अधिक समझ में आता है क्योंकि सूचकांक की शायद ही कभी आवश्यकता होती है।

इस उदाहरण पर विचार करें:
जो & फ़ंक्शन को सबसे अधिक समझ में आता है?

$('.my-selector').each(modifyNodeA); 
$('.my-selector').each(function(){ 
    // this wrapper anonymous function is cruft 
    modifyNodeB(this); 
}); 
$('.my-selector').each(modifyNodeB); // this one won't work 
$('.my-selector').each(modifyNodeC); 
$('.my-selector').each(function(){ 
    // just using 'this' makes sense here.. it's evident that this is a jQuery closure 
}); 

function modifyNodeA(i, node) { 
    // this one works... but gotta have i in the func signature. 
    // it won't be used and doesn't make contextual sense 
    // can also use 'this', but where the heck did it come from.. it's not evident 
} 

function modifyNodeB(node, i) { 
    // 'i' could/should be an optional 2nd param 
    // this function could function on it's own 
} 

function modifyNodeC() { 
    // gotta use the magic 'this' scope var.. where did it come from? 
    // contextually, it would be nice to have the var passed... it is... as the 2nd param! 
} 

आप यहाँ संक्षेप:

Why I STILL prefer Prototype over jQuery - Section 8 - Other Nit-picks

$.each और $().each दोनों पहले सूचकांक, और फिर कॉलबैक करने के लिए मूल्य गुजरती हैं। इसका मतलब है कि अगर मुझे इंडेक्स की आवश्यकता नहीं है, तो मैं नहीं कर सकता हूं, बस इसे प्रोटोटाइप में फ़ंक्शन घोषणा से बाहर छोड़ दें।