使用jQuery附加 <li> 一個項目 <ul> 到新 <ul>

Question

將一組li項目從一個ul追加到新ul 。
當我移動一個時就可以了，但是當我移動兩個時，我的代碼會重復它們。

因此，當我移動A和BI時，請在新的ul獲得AABB而不是AB，我不知道為什么。

這是我的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');
});

 $('#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> 

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>