How would I know when I'm iterating over the last object in a DOM collection with for…of in JavaScript?

Question

I'm using the following code to iterate through a collection of DOM elements (as seen here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Iterating_over_a_DOM_collection )

let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

How would I detect which object in the collection I'm currently looping through? And most importantly, how would I know when I'm currently looking at the last object?

Answer 1

Set a variable to the last paragraph in the list.

var lastParagraph = articleParagraphs[articleParagraphs.length-1];
for (let paragraph of articleParagraphs) {
    paragraph.classList.add("read");
    if (paragraph == lastParagraph) {
        ...
    }
}