Javascript 排序列表，但保留CSS标记 介绍

我目前有一个列表（带有

ul

和

li

）

使用jQuery使其可排序：

$( "#sortable1" ).sortable({
    update : function () {
    var items = $('#sortable1').sortable('serialize');
    alert(items);                       
    }
});
$( "#sortable1" ).disableSelection();

问题 此代码移动完整的

li

项（包括它的类，以及它的标记）

问题 有没有办法匹配目标的目标类？我在这里设置了一个演示：

因此，基本上，当将

项目1

向下移动一个位置时，

项目1

应该变成绿色，

项目2

应该变成

红色

此外，当向下移动

项目1

两处时，

项目1

应为黄色，

项目2

应为红色，最后

项目3

应为绿色

这个演示列表只有四个项目，但实际上可以是任意数量

演示代码

jQuery UI可排序-默认功能
#可排序{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可排序li{margin:0 3px 3px 3px；padding:0.4em；padding left:1.5em；字体大小：1.4em；高度：18px；}
#可排序li span{位置：绝对；左边距：-1.3em；}
.first{背景色：红色；}
.1{背景色：绿色；}
.2{背景色：黄色；}
.last{背景色：蓝色；}
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});

第1项
第2项
第3项
第4项

---

链接：

使用第n个子css伪类

 #sortable li:nth-child(1) { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:nth-child(4)  { background-color: blue; }

---

使用第n个子css伪类

 #sortable li:nth-child(1) { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:nth-child(4)  { background-color: blue; }

---

将css更改为基于索引而非类的目标列表元素，它将自动更新：

#sortable li:first-child { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:last-child { background-color: blue; }

---

将css更改为基于索引而非类的目标列表元素，它将自动更新：

#sortable li:first-child { background-color: red; }
#sortable li:nth-child(2) { background-color: green; }
#sortable li:nth-child(3) { background-color: yellow; }
#sortable li:last-child { background-color: blue; }

---

jQuery UI的可排序性基于移动整个DOM元素的原则

正如您正确注意到的那样，整个DOM对象被移动，包括它的所有内容、所有属性以及它的类

我想到了几种方法：

更改CSS，使其不需要

上的类。可以使用纯CSS使第一个为红色，第二个为绿色，等等。您可以以各种方式使用

n子项

或

+

或

~

选择器。然后移动

s就可以了，它们落到位时的外观也会很好

在每个元素移动后，使用javascript直接删除并重新应用类

---

jQueryUI的可排序性基于移动整个DOM元素的原则

正如您正确注意到的那样，整个DOM对象被移动，包括它的所有内容、所有属性以及它的类

我想到了几种方法：

更改CSS，使其不需要

上的类。可以使用纯CSS使第一个为红色，第二个为绿色，等等。您可以以各种方式使用

n子项

或

+

或

~

选择器。然后移动

s就可以了，它们落到位时的外观也会很好

在每个元素移动后，使用javascript直接删除并重新应用类

---

谢谢，但是我选择阿德内奥的答案是因为他指出了第一个孩子，最后一个孩子，而且他比你稍快。谢谢，但是我选择阿德内奥的答案是因为他指出了第一个孩子，最后一个孩子，而且他比你稍快。