jQuery: eq () बनाम मिलता है ()


98

मैं jQuery के लिए नया हूं, और मैं सोच रहा हूं कि jQuery get()और eq()फ़ंक्शन के बीच क्या अंतर है । मैं समझ सकता हूं कि get()फ़ंक्शन क्या करता है, लेकिन मुझे यह अजीब लगा कि मैं एक ही लाइन में दिए गए एलिमेंट पर दिए गए फंक्शन पर कॉल नहीं कर सकता।

//Doesn't work
I.e.  $("h2").get(0).fadeIn("slow");

//Works
$("h2").eq(0).fadeIn("slow");


जवाबों:


194

.get()और .eq()दोनों एक jQuery ऑब्जेक्ट सरणी से एक "तत्व" लौटाते हैं, लेकिन वे एकल तत्व को विभिन्न रूपों में वापस करते हैं।

.eq() इसे jQuery ऑब्जेक्ट के रूप में लौटाता है, जिसका अर्थ है कि DOM तत्व jQuery के आवरण में लिपटे हुए है, जिसका अर्थ है कि यह jQuery के कार्यों को स्वीकार करता है।

.get()कच्चे DOM तत्वों की एक सरणी देता है। आप उनमें से प्रत्येक को अपनी विशेषताओं तक पहुंच बना सकते हैं और उसके कार्यों को लागू कर सकते हैं जैसा कि आप कच्चे डोम तत्व पर करते हैं। लेकिन यह एक jQuery लिपटे ऑब्जेक्ट के रूप में अपनी पहचान खो देता है, इसलिए एक jQuery फ़ंक्शन जैसे.fadeIn काम नहीं करेगा।


8
.get () एक सरणी देता है, .get (इंडेक्स) सरणी से इंडेक्स में एकल तत्व देता है।
मोहम्मद फसिल

16

get() जबकि एक DOM तत्व देता है :eq() और eq()एक jQuery तत्व लौट आते हैं। चूंकि DOM तत्वों की कोई विधि नहीं है, fadeIn()इसलिए यह विफल है

http://api.jquery.com/get/

विवरण: jQuery ऑब्जेक्ट द्वारा मेल किए गए DOM तत्वों को पुनः प्राप्त करें।

http://api.jquery.com/eq-selector/

विवरण: मिलान किए गए सेट के भीतर इंडेक्स एन में तत्व का चयन करें।


12

get(0)(डॉक्स) सेट में पहला DOM तत्व देता है।

eq(0)(दस्तावेज़) सेट में पहला DOM एलिमेंट देता है, जो एक jQuery ऑब्जेक्ट में लिपटा होता है।

इसलिए .fadeIn("slow");जब आप काम नहीं करते हैं .get(0)। DOM तत्व में कोई fadeIn()विधि नहीं है , लेकिन एक jQuery ऑब्जेक्ट करता है।


6

अन्य उत्तरों पर निर्माण करने के लिए:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true

1
पहले एक सही है। दूसरा एक है not.those 2 वस्तुओं ही नहीं हैं
Royi Namir

5

eq(i)रिसीवर के सेट में एक jQueryवस्तु के रूप में आईआईटी सदस्य को पुनः प्राप्त करता है , जबकि get(i)सदस्य को आईआईटी तत्व के रूप में आईआईटी स्थिति में वापस करता है।

इसका कारण यह नहीं है:

$("h2").get(0).fadeIn("slow");

ऐसा इसलिए है क्योंकि h2DOM तत्व में कोई विधि नहीं हैfadeIn

आपको eq(0)इसके बजाय यहाँ का उपयोग करना चाहिए ।


0

मैं एक उदाहरण दे रहा हूं जो यहां दूसरों द्वारा दिए गए बिंदुओं की व्याख्या करता है। निम्नलिखित कोड पर विचार करें

<div id="example">
    Some text
    <div>Another div</div>
    <!--A comment-->
</div>

और इसी js कोड,

$(document).ready(function() {
    var div = $("#example").get(0);
    console.log(typeof(div));
    console.log(div);
    console.log("XXXXXXXXX");
    var div_eq=$('#example').eq(0);
    console.log(typeof(div_eq));
    console.log(div_eq);
    });

आप यह देख पाएंगे

 object
excercise1.js (line 5)
<div id="example">
excercise1.js (line 6)
XXXXXXXXX
excercise1.js (line 7)
object
excercise1.js (line 9)
Object[div#example]

पहला एक DOM ऑब्जेक्ट है जबकि बाद वाला एक Jquery-लपेटा हुआ ऑब्जेक्ट है जहाँ आप Jquery तरीके कह सकते हैं


0

jQuery eq () विधि एक विशिष्ट सूचकांक संख्या के साथ एक HTML तत्व का चयन करती है।

यहाँ उस का एक उदाहरण है

<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

$( "body" ).find( "div" ).eq( 2 ).addClass( "red" );
// it finds the second div in the html body and change it to red color.

स्रोत: http://www.snoopcode.com/JQuery/jquery-eq-selector


"यह दूसरी div पाता है" => eq(2)तीसरा div वापस नहीं करता है ?
xhienne

0

ऊपर दिए गए उत्तरों ने विशिष्ट और सही तरीके से समझाया है। मैं यहाँ कुछ बिंदुओं को जोड़ना चाहता हूँ जिनके उपयोग में मदद मिल सकती है get()

  1. यदि आप एक तर्क पास नहीं करते हैं .get(), तो यह DOM तत्वों का एक Array लौटाएगा।

  2. यदि आपको एक DOM ऑब्जेक्ट का उपयोग करके मिला है get(), जैसे var s = $("#id").get(0) आप इसे केवल उपयोग करके jQuery ऑब्जेक्ट में वापस बदल सकते हैं,$(s)

  3. आप $obj[i]एक वैकल्पिक तरीके के रूप में उपयोग कर सकते हैं यदि आप उपयोग नहीं करना चाहते हैं $obj.get(i), तो नीचे देखें,

    var $obj = $("#ul li");
    var obj1 = $obj.get(1);
    var obj2 = $obj[1];
    
    //true
    return obj2===obj1;
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.