Javascript foreach loop on list items

Question

I have a basic HTML list like below...

I am using javascript to try and grab the id of each list item and then use a loop to check each one against a string. I have this so far..

var myvariable
myvariable = "item2"
items = document.getElementsByClassName("item");
for (i = 0; i < items.length; i++) {
    console.log(i);
    console.log(item[i]);
}

This isn't working for me, is it because it is not really an array?

user_9343761 · Answer

Add ID ="lstUsers" to ul element < you're registered with DOM now

for (var i = 0; i < lstUsers.children.length; i++) {
   alert( lstUsers.children[i].innerText);
}

#lstUsers  <--css with your id you shrink your HTML down this way...

user_14862885 · Answer

While all of the answers here are equally good, and this qs is old(2017)
I am posting this for knowledge sharing

We can use:

items = document.querySelectorAll(".item");//Get items
items.forEach(function(item) {
  console.log(item);/*Use variable item for any need*/
});

If you need the index of item as well then use

items = document.querySelectorAll(".item");//Get items
items.forEach(function(item,index) {
  console.log(item, index);/*Use variable item & index for any need*/
});

The best of this is that it doesn't need any loop or extra variable like i. Also, it do not make use of a loop like for or while, but a function like forEach(), where forEach is a human-readable word

Note: forEach() cannot be used with getElementsByClassName() ,it supports only querySelectorAll()

Working snippet:

items = document.querySelectorAll(".item");//Get items
items.forEach(function(item) {
  console.log(item);/*Use variable item for any need*/
});

console.log("The below log is with index");

items = document.querySelectorAll(".item");//Get items
items.forEach(function(item,n) {
  console.log(n,item);/*Use variable item for any need*/
});


    Item 1
    Item 2
    Item 3
    Item 4

Javascript foreach loop on list items

6 Answers

Working snippet: