javascript - 使用 jQuery 将一个 中的 项附加到新的

Question

我在将一组 li 项从一个 ul 附加到新的 ul 时遇到问题。
当我移动一个时没问题，但是当我移动两个时我的代码会复制它们。

所以当我移动 A 和 B 时，我在新的 ul 中得到 A A B B 而不是 A B，我不明白为什么。

这是我的 JavaScript:

function moveItems(origin, destination){
  var highlighted = document.querySelectorAll("#leftlist .highlight");
  highlighted.forEach(function(){
    $(origin).clone(true).appendTo(destination);
    $("#leftlist .highlight").remove();

  }
  $("#moveright").click(function(){
    moveItems(".highlight", "#rightlist");
  });

这是我的 HTML:

    <ul id="leftlist" class="list-group list-group-flush">
      <li class="list-group-item">a item</li>
      <li class="list-group-item">b item</li>
      <li class="list-group-item">c item</li>
      <li class="list-group-item">d item</li>
      <li class="list-group-item">e item</li>
      <li class="list-group-item">f item</li>
      <li class="list-group-item">g item</li>
      <li class="list-group-item">h item</li>
      <li class="list-group-item">i item</li>
      <li class="list-group-item">j item</li>
    </ul>
  </div>
</div>
<ul id="rightlist" class="list-group list-group-flush">
</ul>

Answer 1

您的代码逻辑太复杂了 - 根本不需要 .clone() 和 .remove()。

将已附加的元素附加到新位置会自动将其与其现有父元素分离。

此外，jQuery 的 .appendTo 方法将非常愉快地一次移动多个元素，避免了 .forEach 调用的需要:

$('#moveright').on('click', function() {
  $('#leftlist .highlight').appendTo('#rightlist').removeClass('highlight');
});

$('#moveright').on('click', function() {
  $('#leftlist .highlight').appendTo('#rightlist').removeClass('highlight');
});

.highlight {
  color: red;
}

ul {
  display: inline-block;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="moveright">
Move To Right
</button>
<div><span></span>
  <ul id="leftlist" class="list-group list-group-flush">
    <li class="list-group-item">a item</li>
    <li class="list-group-item">b item</li>
    <li class="list-group-item highlight">c item</li>
    <li class="list-group-item">d item</li>
    <li class="list-group-item">e item</li>
    <li class="list-group-item highlight">f item</li>
    <li class="list-group-item">g item</li>
    <li class="list-group-item">h item</li>
    <li class="list-group-item">i item</li>
    <li class="list-group-item">j item</li>
  </ul>
  </span><span>
<ul id="rightlist" class="list-group list-group-flush">
</ul></span>