时间戳

首页 > 解决方案 > UL 上的侦听器遍历 li

javascript - UL 上的侦听器遍历 li

问题描述

我有以下html：

<ul class="collection">
   <li>a
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>s
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>w
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
</ul>

我在 UL 上有一个 onclick 监听器（称为 taskList）。console.log 说元素 UL (taskList) 是一个对象。我可以按如下方式遍历 li：

for (const task in taskList) {
   console.log(task);
}

标签： javascriptobjectiterator

解决方案

不，for ... in将遍历对象的属性。您可以使用for ... of循环遍历children.

const taskList = document.querySelector('ul.collection');
for (const task of taskList.children) {
   console.log(task.outerHTML);
}
<ul class="collection">
   <li>a
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>s
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
   <li>w
      <a class=" delete-item secondary-content">
         <i class="fa fa-remove"></i>
      </a>
   </li>
</ul>

推荐阅读