การนับลำดับองค์ประกอบ DOM ใน JavaScript

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

html<p>ข้อความ</p>
<p>ข้อความ</p>
<p>ข้อความ</p>

มาเรียกคอลเลกชันของย่อหน้าเหล่านี้ เก็บไว้ในตัวแปร:

javascriptlet elems = document.querySelectorAll('p');

มาใช้สำหรับการวนลูปด้วยอิเทอเรเตอร์ในตัว entries:

javascriptfor (let entry of elems.entries()) {
  console.log(entry);
}

มาใช้การดีสตรักเชอริ่งเพื่อ แยกหมายเลขออกจากองค์ประกอบ:

javascriptfor (let [num, elem] of elems.entries()) {
  console.log(num, elem);
}

เพิ่มหมายเลขลำดับต่อท้าย ให้กับแต่ละย่อหน้า:

javascriptfor (let [num, elem] of elems.entries()) {
  elem.textContent += num;
}