การทำงานกับเมธอด each ใน jQuery

เมื่อเรามีกลุ่มขององค์ประกอบที่ได้รับ มาโดยใช้ jQuery เราสามารถทำการเปลี่ยนแปลง พวกมันได้เฉพาะสำหรับทุกองค์ประกอบพร้อมกันเท่านั้น

ตัวอย่างเช่น ถ้าเราต้องการเปลี่ยนข้อความของ ย่อหน้าทั้งหมดที่พบ - เราจะไม่สามารถทำให้ ข้อความต่างกันได้

ในกรณีนี้เมธอดพิเศษ each จะช่วยเราได้ ซึ่งอนุญาตให้ใช้ ฟังก์ชันใด ๆ สำหรับองค์ประกอบทั้งหมดในชุดของ jQuery ในขณะที่ภายในฟังก์ชันนี้เราจะสามารถ แยกองค์ประกอบและทำต่างกัน กับแต่ละองค์ประกอบได้

โดยพื้นฐานแล้ว each เป็นลูป ด้วยความช่วยเหลือซึ่งสามารถวนซ้ำองค์ประกอบทั้งหมด ที่พบได้ ลิงก์ไปยังองค์ประกอบนั้นซึ่ง กำลังถูกวนซ้ำในขณะนี้จะอยู่ใน this

เราสามารถใช้ this นี้ ใน JavaScript ธรรมดาได้ ดังที่เราทำมาก่อนหน้านี้ ตัวอย่างเช่น อย่างนี้ - this.innerHTML - และแสดง เนื้อหาภายในขององค์ประกอบของเรา แต่ควรห่อ this ด้วยเครื่องหมายดอลลาร์ jQuery อย่างนี้ - $(this) - ในกรณีนี้เราจะสามารถใช้วิธีการ และเชนของ jQuery ทั้งหมดกับมันได้

มาดูโค้ด HTML ต่อไปนี้กัน:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

ในตัวอย่างนี้เราควรได้รับองค์ประกอบทั้งหมด ที่มีคลาส www และแสดงบนหน้าจอ เนื้อหาของพวกมัน วิธีทำ: โดยใช้ $('.www') เราได้รับองค์ประกอบที่ต้องการ, จากนั้นโดยใช้ each(test) เราใช้ฟังก์ชัน test กับแต่ละองค์ประกอบ ที่ได้รับ มันจะถูกใช้กับย่อหน้าแรกก่อน, จากนั้นกับย่อหน้าที่สอง, ที่สาม และต่อไปเรื่อยๆ

ภายในฟังก์ชัน this จะชี้ไปที่ องค์ประกอบนั้นซึ่งฟังก์ชัน test กำลังถูกใช้ - ก่อนอื่นนี่จะเป็นองค์ประกอบแรก, จากนั้นอันที่สอง และอื่นๆ ด้วยความช่วยเหลือของ โครงสร้าง $(this) แทนที่จะเป็น this ธรรมดาจาก JavaScript เราจะได้องค์ประกอบ jQuery และใช้เมธอด html กับมัน ซึ่ง จะได้ข้อความขององค์ประกอบของเรา จากนั้น มันจะถูกแสดงบนหน้าจอ:

/*
	เราเขียนชื่อฟังก์ชัน test โดยไม่มีเครื่องหมายคำพูดและ (),
	เพราะเราต้องการโค้ดของมัน ไม่ใช่ผลลัพธ์:
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

สำหรับการแก้ไขงานนี้สามารถใช้ฟังก์ชันที่ไม่ระบุชื่อได้ - นี่เป็นสิ่งที่ทำกันบ่อยที่สุด:

$('.www').each(function() {
	alert($(this).html());
});

เรายังสามารถส่ง callback function พร้อมพารามิเตอร์ให้กับเมธอด each ได้

มาในตัวอย่างถัดไปเพิ่มลำดับ ให้กับ li ทั้งหมดบนหน้าเว็บ ทีนี้ ในฟังก์ชันที่ไม่ระบุชื่อของเราเราจะส่งหมายเลข องค์ประกอบและตัวองค์ประกอบเอง:

$('li').each(function (index, elem) {
	$(elem).append(index);
});

และตอนนี้ใช้ this แทน elem:

$('li').each(function (index) {
	$(this).append(index);
});

เปลี่ยนเนื้อหาของ li ทั้งหมดเป็น หมายเลขลำดับของพวกมัน