如何定位 <li> 元素并在列表之间传输

debugcn 发表于 Dev

金

我是这里的新手。我在 HTML 中有两个不同的列表：第一个列表包含几个元素，第二个列表不包含任何元素。

我的目标是将列表 1 的元素传输到列表 2。我确实想通过单击“移动”符号（我定位）来传输这些元素。

但是，我不知道如何针对 li 元素进行传输。

我知道这是一个基本问题，但仍然感谢您的支持和时间！

我试图将EventListener 添加到“移动”。因此，我尝试使用 textContext 来修改列表 2 元素。但是，我不知道如何定位第一个列表中的 li 元素。

//FIRST LIST
<ul class="list-group todos mx-auto text-light">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>play mariokart</span>
            <i class="far fa-trash-alt move"></i>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>defeat ganon in zelda</span>
            <i class="far fa-trash-alt move"></i>
          </li>

//SECOND LIST
<h1>Items in the Pack</h1>
      <ul class ="pack">
        <li> </li>
        <li> </li>
        <li> </li>
      </ul>

 const list = document.querySelector('.todos');
 const pack = document.querySelector(".pack");


 list.addEventListener('click', e => {

      if(e.target.classList.contains('move')){
       pack.querySelector('li').textContent = `${//missing variable//}%`; 

      }

    }); ```

卡美哈美哈

您可以使用parentElement来获取列表元素，该元素是move该类元素的直接父元素。

然后，您可以创建新的列表元素并将它们附加到目标列表。这是流程，对您的代码进行了细微的更改。

 const list = document.querySelector('.todos');
 const pack = document.querySelector(".pack");

 list.addEventListener('click', e => {
   if (e.target.classList.contains('move')) {
     let originalListEntry = e.target.parentElement;
     var newListEntry = document.createElement("li")
     newListEntry.innerText = originalListEntry.innerText
     pack.appendChild(newListEntry)
   }
 });

这是一个工作示例，为了演示目的，我在移动跨度内添加了一个 +。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。