Javascript 将项目移动到列表末尾

我用jQuery和Bootstrap创建了一个待办事项列表。当用户单击某个项时，它将被添加到类“completed”中，并使用CSS向类添加一个穿透。如何使项目移动到列表的末尾

这是我试过的。查看完整代码

  $('ul').on('click', 'li', function() {
    $(this).toggleClass('completed');
    $('.completed').appendTo($(this));
  });

---

如果在

ul

上使用

display:flex

，则可以将

order:1

添加到

completed

规则中，并让CSS处理布局

堆栈片段

$（函数（）{
设度=90；
//旋转“+”并在单击时下拉或重新关闭输入框
$（'.fa plus'）。在（'click'，function（）上{
如果（度===135）{
度=45；
}
//设置CSS转换属性。选择器“this”指正在单击的“+”（类为“.fa plus”）
$（this.css）({
“-webkit变换”：“旋转（“+degree+”deg）”，
“-moz变换”：“旋转（“+degree+”deg）”，
“-ms变换”：“旋转（“+度+”度）”，
“-o变换”：“旋转（“+度+”度）”，
“变换”：“旋转（“+度+”度）”，
“过渡”：“0.2s线性”
});
学位+=45；
//设置文本框不透明度的动画，在其不透明度达到0（如果可见）时将其“显示样式”属性设置为“无”，如果已隐藏，则将其“显示样式”属性设置为“无”
$（'input[type=“text”]”）。fadeToggle（）；
});
//单击后检查特定项目并将其添加到类“已完成”
$（'ul'）。在（'click'，'li'，function（）上{
$（this.toggleClass（'completed'）；
});
//单击以删除
$（'ul'）。在（'click'，'span'，函数（e）上{
//fadeOut（）通过将元素设置为透明来隐藏元素
$（this.parent（）.fadeOut（500，function（））{
//删除元素及其数据和事件
$（this.remove（）；
});
//防止事件在DOM树上冒泡，并将其通知任何父处理程序
e、 停止传播（）；
});
$（'input[type=“text”]”）。在（'keypress'，函数（e）上{
//如果用户点击回车键。。。
如果（e.which==13）{
//从输入中获取新的待办事项列表项
让itemText=$（this.val（）；
//如果输入框中没有任何内容，则停止函数执行
如果（itemText==''）返回；
//清除输入框
$（this.val（“”）；
//从输入创建新的li并添加到ul的开头
$（'ul'）.prepend（'
'+itemText+'
'）；
}
});
});
正文{
保证金：0；
字体系列：Roboto，无衬线；
背景#642B73；
背景：-webkit线性梯度（向右，#C6426E，#642B73）；
背景：线性梯度（向右，#C6426E，#642B73）；
}
h1{
背景#642B73；
颜色：白色；
保证金：0；
填充：10px 20px；
文本转换：大写；
字体大小：20px；
字体大小：正常；
}
.集装箱{
保证金：100像素自动；
背景：#f7f7f7；
宽度：360px；
盒影：0.50pxRGBA（0,0,0,0.1）；
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
显示器：flex；
弯曲方向：立柱；
}
李{
背景：白色；
/*从第一行文字顶部到第二行文字顶部的距离*/
线高：35px；
颜色：#666；
填充：0 5px 0 px 15 px；
位置：相对位置；
游标：默认；/*阻止默认文本游标*/
}
/*设置偶数li元素的颜色*/
李：第n个孩子（偶数）{
背景：#f7f7f7；
}
输入{
字体大小：1em；/*文本小于没有此选项的li文本*/
背景：#f7f7f7；
宽度：100%；
高度：35px；
/*从第一行文字顶部到第二行文字顶部的距离*/
线高：35px；
/*顺序：上、右、下、左*/
填充：13px 13px 13px 13px；
/*在元素的总宽度和高度中包括填充和边框*/
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
颜色：#C6426E；
边框：3倍实心rgba（0,0,0,0）；
}
/*将输入占位符文本颜色设置为与li文本颜色匹配的伪选择器*/
输入：：占位符{
颜色：#666；
}
/*设置用户单击内部时输入框边界的外观*/
输入：焦点{
背景：白色；
边框：3px实心#642B73；
大纲：无；
}
.完成{
颜色：灰色；
文字装饰：线条贯通；
顺序：1；
}
/*样式“+”符号。Top属性使元素的上边缘在其正常位置上方/下方移动（在本例中为下方）*/
法加{
浮动：对；
位置：相对位置；
顶部：4px；
光标：指针；
}
/*样式引导垃圾桶图标。注意默认值为0px宽（在下一个CSS规则集中悬停更改）*/
跨度{
背景：#e74c3c；
高度：35px；
宽度：0px；
不透明度：0；
右边距：0px；
位置：绝对位置；
/*将右边缘设置为最近定位的祖先li元素的右边缘*/
右：0；
文本对齐：居中；
颜色：白色；
过渡：0.2s线性；
光标：指针；
}
/*将鼠标悬停在列表项上时，将范围内容（引导垃圾箱图标）设置为35px宽且完全不透明*/
李：悬停跨度{
宽度：35px；/*适用于图标背景*/
不透明度：1.0；
}

待办事项清单
待办事项清单

做一个小时的项目
散步
沉思
伸展

$（'completed'）
正在查找明显不存在的标记。另外，
此
是
而不是
切换类添加类“已完成”This'指的是事件处理程序正在处理的元素。实际上，它根据当前状态添加或删除。仍然与选择器
$（'completed'）
无关，在单击之前，尚未为列表项添加类。因此，一旦它被添加，它就会被添加。charlietfl意味着
$（'completed'）
缺少点，应该是
$（'completed'）
。显然是一个拼写错误，因为你在代码笔上的拼写是正确的。