UL 上的侦听器遍历 li

如何解决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);
}

解决方法

不，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>