Javascript foreach loop on list items

Question

I have a basic HTML list like below...

<ul class="test_ul">
    <li class="item" id="item1">
        Item 1
    </li>
    <li class="item" id="item2">
        Item 2
    </li>
    <li class="item" id="item3">
        Item 3
    </li>
    <li class="item" id="item4">
        Item 4
    </li>
</ul>

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?

getElementsByClassName => "Returns an array-like object of all child elements which have all of the given class names.", you'll have to convert it to an array. — WilomGfx
– WilomGfx, Commented Jun 3, 2017 at 16:10
What do you mean by “not working”? So far you just log the indices of each element in items. — Sebastian Simon
– Sebastian Simon, Commented Jun 3, 2017 at 16:10

maazadeeb · Accepted Answer · 2017-06-03 16:11:57Z

8

You're logging the index i, instead, use items[i].id to get the id of the matched element. Something like this

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

<ul class="test_ul">
  <li class="item" id="item1">
    Item 1
  </li>
  <li class="item" id="item2">
    Item 2
  </li>
  <li class="item" id="item3">
    Item 3
  </li>
  <li class="item" id="item4">
    Item 4
  </li>
</ul>

answered Jun 3, 2017 at 16:11

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Booster2ooo · Accepted Answer · 2022-04-19 09:10:20Z

3

Using ES6 (might need to transpile or add polyfills for older browsers):

// Get the DOMCollection of node corresponding to the item class
var items = document.getElementsByClassName("item")
// Transform the DOMCollection to an array and map item.id
  , ids = Array.from(items).map(item => item.id);
  ;    
console.log(ids);

<ul class="test_ul">
    <li class="item" id="item1">
        Item 1
    </li>
    <li class="item" id="item2">
        Item 2
    </li>
    <li class="item" id="item3">
        Item 3
    </li>
    <li class="item" id="item4">
        Item 4
    </li>
</ul>

Using ES5 only:

var items = document.getElementsByClassName("item")
  , ids = []
  ; 
for(var i = 0, c = items.length; i<c; i++) {
    ids.push(items[i].id);
}
console.log(ids);

    <ul class="test_ul">
        <li class="item" id="item1">
            Item 1
        </li>
        <li class="item" id="item2">
            Item 2
        </li>
        <li class="item" id="item3">
            Item 3
        </li>
        <li class="item" id="item4">
            Item 4
        </li>
    </ul>

edited Apr 19, 2022 at 9:10

answered Jun 3, 2017 at 16:12

Booster2ooo

1,44710 silver badges13 bronze badges

4 Comments

charlietfl Over a year ago

Note that from() has limited browser support

Booster2ooo Over a year ago

@charlietfl polyfills/transpilers exist :)

charlietfl Over a year ago

Right but that was not mentioned. If OP didn't know and ran this in IE would fail

Booster2ooo Over a year ago

@charlietfl thanks, I added the info. I'll also provide a more compatible code.

Nina Scholz · Accepted Answer · 2017-06-03 16:19:40Z

2

You could borrow Array#map for an array like object and return just the id property of the objects.

var result = [].map.call(document.getElementsByClassName("item"), function(o) {
        return o.id;
    });

console.log(result);

<ul class="test_ul">
    <li class="item" id="item1">Item 1</li>
    <li class="item" id="item2">Item 2</li>
    <li class="item" id="item3">Item 3</li>
    <li class="item" id="item4">Item 4</li>
</ul>

answered Jun 3, 2017 at 16:19

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Zach Harriott · Accepted Answer · 2017-06-03 16:25:22Z

My understanding is, you want to loop through this list of items and find a match of the item based on a specified string.

What you've done so far with the classes is good. This will allow you to reference all the list items, but there isn't really a need for the IDs based on what I think it is that you're trying to do.

If I were you, I would utilize a querySelectorAll, which returns an iterable array of HTML nodes that we can do whatever we want with.

Here's my code.

let listItemArray = document.querySelectorAll('.item');
console.log(listItemArray);
const SEARCH_STRING = 'Item 1'

for(let i=0; i<listItemArray.length; i++) {
  if(listItemArray[i].innerText === SEARCH_STRING) {
    console.log(`The item was found! ${listItemArray[i]}`); // This syntax is called a query string. Powerful stuff. Look them up.
  }
}

<ul class="test_ul">
    <li class="item" id="item1">
        Item 1
    </li>
    <li class="item" id="item2">
        Item 2
    </li>
    <li class="item" id="item3">
        Item 3
    </li>
    <li class="item" id="item4">
        Item 4
    </li>
</ul>

Qiniso · Accepted Answer · 2020-10-06 20:59:23Z

2

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...

edited Oct 6, 2020 at 20:59

Qiniso

2,6291 gold badge25 silver badges31 bronze badges

answered Oct 6, 2020 at 19:26

Julien Brunelle

212 bronze badges

Comments

redoc · Accepted Answer · 2022-04-18 09:49:52Z

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*/
});

<ul class="test_ul">
    <li class="item" id="item1">Item 1</li>
    <li class="item" id="item2">Item 2</li>
    <li class="item" id="item3">Item 3</li>
    <li class="item" id="item4">Item 4</li>
</ul>

Collectives™ on Stack Overflow

Javascript foreach loop on list items

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Working snippet:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Working snippet:

Comments

Your Answer

Sign up or log in

Post as a guest

Related