Looping through a HTML list with JavaScript

Question

How do I loop through a list of li tags inside a ul in order to get the textContent of the clicked li element?

var ul    = document.getElementsByClassName('ul')[0];
var items = ul.getElementsByTagName('li');

$("li").on("click", function(){
    for (var i =0; i<items.length;i++) {
        console.log(items[i]);
    }
});

My attempt above logs the textContent of all the li elements within the list whereas I only want the textContent of the clicked element. How could I specify the element clicked?

$("li").on("click", function(){console.log($(this).text());}); — baao
– baao, Commented Jun 27, 2017 at 17:46

Killuminati · Accepted Answer · 2017-06-27 17:48:03Z

3

$("ul > li").on("click", function(e){
   console.log(this.textContent);
});

answered Jun 27, 2017 at 17:48

Killuminati

2712 silver badges11 bronze badges

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

Comments

DanielR · Accepted Answer · 2017-06-27 18:40:17Z

0

Kiluminati's answer should do the trick. This is how it works:

$('ul > li') creates an array of jQuery object made of all the lis
The jQuery method .on() attaches an eventListener to the DOM object, in this case, each li element
When the element is clicked, the eventListener is triggered, and calls the handler function, binding its this variable context to the element that was clicked

answered Jun 27, 2017 at 18:40

DanielR

5962 gold badges7 silver badges20 bronze badges

1 Comment

user7718111 Over a year ago

Brilliantly explained, Thanks!

Collectives™ on Stack Overflow

Looping through a HTML list with JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related