如何将jQuery+Bootstrap待办列表中已划掉项移至列表末尾？

嘿，我看了你写的代码，问题出在最后一行的appendTo目标上啦！你现在是把所有已完成的项都塞进当前点击的<li>里，这肯定不是你想要的效果～

咱们来修正一下：

$('ul').on('click', 'li', function() {
  const $li = $(this);
  // 切换完成状态样式
  $li.toggleClass('completed');
  
  // 判断当前项是否处于完成状态
  if ($li.hasClass('completed')) {
    // 把完成的项移到列表的最后位置
    $li.appendTo($li.parent());
  } else {
    // 可选逻辑：如果取消完成状态，把项移回列表最前面
    $li.prependTo($li.parent());
  }
});

代码细节说明： #

• 先用const $li = $(this)缓存当前点击的元素，避免重复查询DOM，小幅度提升性能。
• toggleClass('completed')保留了你原本的切换删除线样式的逻辑，没问题。
• 当元素被标记为完成时，appendTo($li.parent())会把它添加到父元素（也就是<ul>）的末尾，这样所有完成的项都会自动排到列表最后。
• 可选的else部分：如果用户取消了完成状态，你可以把该项移回列表开头，也可以根据需求调整成插在第一个未完成项的前面，灵活度很高。

另外，如果你希望页面加载时，已有的完成项就自动排在末尾，可以加一段初始化代码：

// 页面加载完成后，把已标记完成的项移到列表末尾
$('.completed').appendTo('ul');

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者nCardot