如何追加 <li> 到另一個 <ol> 使用jQuery單擊事件？

Question

我有一個動態生成的列表，這是我的HTML代碼

<ol class="pending">
  <li><a href="#" class="rendered">One</a></li>
  <li><a href="#" class="rendered">Two</a></li>
  <li><a href="#" class="rendered">Three</a></li>
  <li><a href="#" class="rendered">Four</a></li>
  <li><a href="#" class="rendered">Five</a></li>
  <li><a href="#" class="rendered">Six</a></li>
</ol>
<ol class="patched"></ol>

單擊任何特定鏈接時，它應移至其他列表。

/*jslint browser: true*/ /*global  $*/ 
$(document).ready(function(){
    "use strict";
    $('.rendered').on('click', function(){
        $(this).toggleClass("rendered patched");
        //$(this).parent().append($(this).wrap("<li></li>"));
        $(this).appendTo("ol.patched");
    });
});

到目前為止，唯一的困難是將<li>中的錨點值作為<li>添加到新列表中。

我一直得到的結果是

<ol class="pending">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol> 
<ol class="moved">
  <a href="#" class="dld">One</a>
  <a href="#" class="dld">Two</a>
  <a href="#" class="dld">Three</a>
  <a href="#" class="dld">Four</a>
  <a href="#" class="dld">Five</a>
  <a href="#" class="dld">Six</a>
</ol>

我不確定我對.append()和.appendTo()什么誤解

Answer 1

您應該選擇anchor的父項並將其附加到ol 。 jQuery .parent()選擇元素的父級。

$('.rendered').on('click', function(){
    $(this).toggleClass("rendered patched");
    $(this).parent().appendTo("ol.patched");
});

 $('.rendered').on('click', function(){ $(this).toggleClass("rendered patched"); $(this).parent().appendTo("ol.patched"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol class="pending"> <li><a href="#" class="rendered">One</a></li> <li><a href="#" class="rendered">Two</a></li> <li><a href="#" class="rendered">Three</a></li> <li><a href="#" class="rendered">Four</a></li> <li><a href="#" class="rendered">Five</a></li> <li><a href="#" class="rendered">Six</a></li> </ol> <ol class="patched"></ol> 

您也可以在一行中編寫代碼

$('.rendered').on('click', function(){
  $(this).toggleClass("rendered patched").parent().appendTo("ol.patched");
});