使用JavaScript遍历HTML列表

Question

我如何遍历ul中的li标签列表以获取单击的li元素的textContent ？

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]);
    }
});

上面我尝试登录了textContent所有的li列表中的元素，而我只想要textContent被单击元素。 如何指定点击的元素？

Answer 1

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

Answer 2

Kiluminati的答案应该可以解决问题。 它是这样工作的：

• $('ul > li')创建一个由所有li组成的jQuery对象数组
• jQuery方法.on()将一个eventListener附加到DOM对象，在这种情况下，每个li元素
• 单击元素时，将触发eventListener，并调用处理程序函数， this变量上下文绑定到单击的元素