jQuery วนลูป element บนหน้าเว็บไซต์ ด้วยคำสั่ง each

jQuery วนลูป element บนหน้าเว็บไซต์ ด้วยคำสั่ง each บทความนี้สอนการใช้คำสั่ง .each() สำหรับวนลูป elements ที่ต้องการ ด้วย jQuery จากตัวอย่างเป็นการวนลูป div ทั้งหมด และแสดงข้อความที่ console สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง jQuery วนลูป element บนหน้าเว็บไซต์ ด้วยคำสั่ง each

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $("div").each( function( index ){
        console.log( "div ที่ "+index+" ข้อมูลคือ "+$(this).text() );
    });
</script>

ผลลัพธ์

div ที่ 0 ข้อมูลคือ 1
div ที่ 1 ข้อมูลคือ 2
div ที่ 2 ข้อมูลคือ 3
div ที่ 3 ข้อมูลคือ 4
div ที่ 4 ข้อมูลคือ 5

jQuery วนลูป element บนหน้าเว็บไซต์ ด้วยคำสั่ง each จากตัวอย่าง $("div").each( function( index ) หมายความว่า ให้วนลูปตามจำนวน div ที่อยู่ในหน้าเว็บไซต์ และเก็บรอบการวนลูปไว้ที่ตัวแปร index เพื่อนำไปใช้งานในฟังก์ชันการวนลูปของคำสั่ง each โดยในลูป each ใช้คำสั่ง $(this).text() หมายความว่าให้อ้างถึง element หรือ div ที่กำลังวนลูป และใช้คำสั่ง text() แสดงข้อความใน div ออกมา