如何定位 <li> 元素并在列表之间转移

Question

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

我的目标是将列表 1 的元素转移到列表 2。我确实想转移那些点击 "move" 符号（我定位的）的元素。

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

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

我已尝试将 EventListener 添加到 "move"。因此，我尝试使用 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//}%`; 

      }

    }); ```

Answer 1

首先，您需要使用 /ul 关闭您的第一个列表。

将移动 class 放入包含待办事项的 li 元素中

<li class="move list-group-item d-flex justify-content-between align-items-center">

那么，这个脚本应该可以处理所有事情。

<script>
    window.onload = function() {
        document.getElementById('movebutton').addEventListener('click', function() {
            const list = document.querySelector('.todos').getElementsByTagName('li');
            const pack = document.querySelector('.pack');
            for(var x=0; x<list.length; x++) {
                if(list[x].classList.contains('move')) {
                    pack.appendChild(list[x]);
                    x--;
                }
            }
        });
    }
</script>

appendChild 自动从原始列表中删除，因此您需要x-- 来更正下一个循环指向的位置。

和一个附加到事件侦听器的按钮。

<button id="move">move</button>

编辑：

抱歉，我错过了您想要单独移动它们的部分。以下修复了该问题，并确保您的列表元素保持其 class 和样式等。单击移动文本以移动它们。

此外，刚刚添加了 return 回到原始列表功能。

window.onload = function() {
  const list = document.querySelector('.todos');
  const pack = document.querySelector('.pack');
  list.addEventListener('click', function(e) {
    if(e.target.classList.contains('move')) {
      e.target.innerText = " - return";
      li = e.target.parentElement;
      pack.appendChild(li);
    }
  });
  pack.addEventListener('click', function(e) {
    if(e.target.classList.contains('move')) {
      e.target.innerText = " - move";
      li = e.target.parentElement;
      list.appendChild(li);
    }
  });

}

//FIRST LIST
<ul id="first" class="list-group todos mx-auto text-light">
  <li class="list-group-item  d-flex justify-content-between align-items-center">
    <span style="font-weight:bold">play mariokart</span>
    <i class="far fa-trash-alt move"> - move</i>
  </li>
  <li class="list-group-item move d-flex justify-content-between align-items-center">
    <span>defeat ganon in zelda</span>
    <i class="far fa-trash-alt move"> - move</i>
    </li>
</ul>
        
//SECOND LIST
<h1>Items in the Pack</h1>
<ul id="second" class ="pack">
  <li> </li>
  <li> </li>
  <li> </li>
</ul>

Answer 2

您可以使用 parentElement 获取列表元素，该元素是 move class.

元素的直接父元素

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

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

这是一个working example 为了演示目的，我在移动范围内添加了一个 +。

如何定位 <li> 元素并在列表之间转移

How to Target <li> Element and Transfer between Lists

javascript

list

target

编辑：