如何使用 jquery 在单击事件上将 <li> 附加到另一个 <ol>？

Posted 2023-02-22

【中文标题】如何使用 jquery 在单击事件上将 <li> 附加到另一个 <ol>？

【英文标题】：How to append <li> to another <ol> on click event using jquery?

【发布时间】：2017-05-01 20:22:22

【问题描述】：

我有一个动态生成的列表，这是我的 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");
    );
);

到目前为止，唯一的困难是将

中的锚值作为 添加到新列表中。

我不断得到的结果是

<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() 有什么误解

【问题讨论】：

adding jQuery click events to dynamically added content的可能重复

【参考方案1】：

您应该选择锚的父级并将其附加到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");
);