jQuery: eq () เทียบกับ get ()


99

ฉันยังใหม่กับ jQuery และฉันสงสัยว่าความแตกต่างระหว่าง jQuery get()และeq()ฟังก์ชันคืออะไร ฉันอาจเข้าใจผิดว่าget()ฟังก์ชันทำอะไร แต่ฉันคิดว่ามันแปลกที่ฉันไม่สามารถเรียกใช้ฟังก์ชันที่ส่งคืนในองค์ประกอบที่ส่งคืนในบรรทัดเดียวกัน

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

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


คำตอบ:


196

.get()และ.eq()ทั้งสองส่งคืน "องค์ประกอบ" เดียวจากอาร์เรย์วัตถุ jQuery แต่ส่งคืนองค์ประกอบเดียวในรูปแบบที่แตกต่างกัน

.eq() ส่งคืนเป็นวัตถุ jQuery ซึ่งหมายความว่าองค์ประกอบ DOM ถูกห่อด้วย jQuery wrapper ซึ่งหมายความว่ายอมรับฟังก์ชัน jQuery

.get()ส่งคืนอาร์เรย์ขององค์ประกอบ DOM ดิบ คุณสามารถปรับแต่งแต่ละรายการได้โดยเข้าถึงแอตทริบิวต์และเรียกใช้ฟังก์ชันต่างๆเช่นเดียวกับที่คุณทำในองค์ประกอบ DOM ดิบ แต่มันสูญเสียเอกลักษณ์ของมันในฐานะวัตถุที่ห่อหุ้ม jQuery ดังนั้นฟังก์ชัน jQuery .fadeInจะไม่ทำงาน


8
.get () ส่งคืนอาร์เรย์, .get (ดัชนี) ส่งคืนองค์ประกอบเดี่ยวที่ดัชนีจากอาร์เรย์
Mohamed Fasil

16

get()ส่งคืนองค์ประกอบ DOM ในขณะที่:eq()และeq()ส่งคืนองค์ประกอบ jQuery เนื่องจากองค์ประกอบ DOM มีวิธีการไม่มีfadeIn()มันล้มเหลว

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

คำอธิบาย:ดึงองค์ประกอบ DOM ที่ตรงกับวัตถุ jQuery

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

คำอธิบาย:เลือกองค์ประกอบที่ดัชนี n ภายในชุดที่ตรงกัน


12

get(0)(docs) ส่งคืนองค์ประกอบ DOM แรกในชุด

eq(0)(docs) ส่งคืนองค์ประกอบ 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
ข้อแรกถูกต้อง อันที่สองไม่ใช่วัตถุ 2 ชิ้นนั้นไม่เหมือนกัน
Royi Namir

5

eq(i)ดึงสมาชิก ith ในเซตของผู้รับเป็นjQueryวัตถุในขณะที่get(i)ส่งคืนสมาชิกที่ตำแหน่ง ith เป็นองค์ประกอบ DOM

สาเหตุที่ไม่ได้ผล:

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

เป็นเพราะh2องค์ประกอบ DOM ไม่มีวิธีการที่เรียกว่า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


"it find the second div" => ไม่eq(2)ส่งคืน div ที่สาม?
xhienne

0

คำตอบข้างต้นได้อธิบายอย่างเจาะจงและถูกต้อง ฉันต้องการเพิ่มบางจุดที่นี่ซึ่งอาจช่วยในการใช้ไฟล์get()ไฟล์.

  1. หากคุณไม่ผ่านการโต้แย้งไปที่ .get()ก็จะส่งคืน Array ขององค์ประกอบ DOM

  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;
    
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.