Question

将一组li项从一个ul附加到新ul时出现问题。
当我移动一个它很好，但当我移动两个时，我的代码重复它们。

所以当我移动A＆amp; B我在新ul而不是A B中得到A A B 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

这可能就是你要找的东西：

function transferListItems($source,$destination){
  var $highlighted = $source.find('.highlight');
  $highlighted.clone(true).appendTo($destination);
}

$('#transfer').click(function(){
  transferListItems($('#list1'),$('#list2'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>List 1</h5>
<ul id="list1">
  <li class="highlight">One</li>
  <li>Two</li>
  <li class="highlight">Three</li>
  <li>Four</li>
  <li class="highlight">Five</li>
</ul>
<button id="transfer">Transfer</button>
<h5>List 2</h5>
<ul id="list2">
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

Answer 2

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

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

此外，jQuery的.appendTo方法可以很高兴地同时移动多个元素，从而无需进行.forEach调用：

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

＆＃13;

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

＆＃13;

.highlight {
  color: red;
}

ul {
  display: inline-block;
  vertical-align: top;
}

＆＃13;

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

＆＃13;

Answer 3

在您的代码中，查看forEach语句中的部分。在循环内部，您将选择所有“原点”并克隆它们。这就是您看到重复副本的原因。

我修改了这部分并添加了一些类似于你要实现的功能。

左侧列表以红线为界，右侧列表以蓝线为界。

单击左侧列表中的一个或多个项目（红色框中的项目），然后按按钮。您可以看到所选项目已移至右侧列表（蓝色框）。

function hightlightOnClick (e) {
  $(e.currentTarget).addClass("highlight");
}

function moveItems (origin, destination) {  
  $(origin).clone(true).appendTo(destination);
  $("#leftlist .highlight").remove();
  
  // we don't want items in the rightbox to respond to click event any more.
  $(".highlight").off("click", hightlightOnClick);  

  // detaches highlight classes from every item.
  $(".highlight").removeClass("highlight");
}

$("#leftlist .list-group-item").click(hightlightOnClick);

$("#moveright").click(function () {		
	moveItems("#leftlist .highlight", "#rightlist");
});

.highlight {
  color: red;
}

#leftlist {
  border: 1px solid red;
  min-height: 100px;
}

#rightlist {
  border: 1px solid blue;
  min-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="moveright">
Move To Right
</button>
<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>

<ul id="rightlist" class="list-group list-group-flush">
</ul>

使用jQuery将<li>项从一个<ul>追加到新的<ul>

3 个答案: