jQuery หลักฐานที่เลือกเรียง - eq() มิติธรรมชาติ

jQuery หลักฐานที่เลือกเรียง

ตัวอย่าง

ด้วยการเพิ่มชั้นที่เหมาะสมให้กับ div ที่มี index 2 จะทำให้มันเปลี่ยนเป็นสีส้มมะว้าง

$("body").find("div").eq(2).addClass("blue");

ทดลองด้วยตัวเอง

คำอธิบายและการใช้งาน

eq() มิติธรรมชาติจะลดชุดองค์ประกอบที่สอดคล้องกับองค์ประกอบที่มีตัวเลข index ที่กำหนด

ศัพท์

.eq(index)
ตัวแปร รายละเอียด
index

ตัวเลข หมายถึงตำแหน่งขององค์ประกอบ (มากกว่า 0)

ถ้าเป็นตัวเลขลบ จะนับกลับจากองค์ประกอบสุดท้ายของชุด

รายละเอียด

ถ้าใส่ jQuery แบบว่างที่มีชุดองค์ประกอบของ DOM ไว้ .eq() มิติธรรมชาติจะสร้าง jQuery แบบใหม่ที่มีองค์ประกอบหนึ่งในชุด โดยใช้ตัวเลข index ที่กำหนดมาหมายถึงตำแหน่งขององค์ประกอบในชุด

ดูรายการรายละเอียดต่อไปนี้

<ul>
  <li>รายการที่ 1</li>
  <li>รายการที่ 2</li>
  <li>รายการที่ 3</li>
  <li>รายการที่ 4</li>
  <li>รายการที่ 5</li>
</ul>

ตัวอย่าง 1

เราสามารถนำวิธีนี้มาใช้กับชุดรายการนี้

$('li').eq(2).css('background-color', 'red');

ทดลองด้วยตัวเอง

ผลลัพธ์ของการเรียกใช้งานนี้คือการตั้งสีหลังพื้นสีแดงให้กับองค์ประกอบที่ 3 โปรดจำที่ index คือตัวเลขที่เริ่มต้นที่ 0 และเป็นตำแหน่งขององค์ประกอบใน jQuery แบบเกี่ยวข้อง ไม่ใช่ตำแหน่งขององค์ประกอบใน DOM Tree

ตัวอย่าง 2

ถ้าใส่ตัวเลขลบ จะหมายถึงตำแหน่งที่เริ่มต้นจากท้ายของชุด ไม่ใช่จากท้าย

$('li').eq(-2).css('background-color', 'red');

ทดลองด้วยตัวเอง

ครั้งนี้ สีขององค์ประกอบที่ 4 ได้เปลี่ยนเป็นสีแดง เพราะมันเป็นองค์ประกอบที่สองจากท้ายของชุด

ตัวอย่าง 3

ถ้าไม่สามารถหาองค์ประกอบตามตัวเลข index ที่กำหนดได้ มิติธรรมชาติจะสร้าง jQuery แบบที่มีชุดว่าง และตัวแปร length จะมีค่า 0

$('li').eq(5).css('background-color', 'red');

ทดลองด้วยตัวเอง

ที่นี่ ไม่มีรายการหนึ่งที่เปลี่ยนเป็นสีแดง เพราะ .eq(5) หมายถึงรายการที่หก

jQuery หลักฐานที่เลือกเรียง