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

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

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

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

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

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

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

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

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

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

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

ให้ตาราง HTML มา ให้ทำการนับลำดับแต่ละ เซลล์ของตารางนี้