使用jQuery在列表中按数据属性重新排序项目

【问题标题】：使用jQuery在列表中按数据属性重新排序项目(Reorder items by data attribute in list with jQuery)
【发布时间】：2022-01-27 02:30:33
【问题描述】：

我有这份清单

我想在点击时重新排序。单击的项目应替换第二个元素（数据顺序 = 1），但顺序应保持不变。例如，当我单击 data-order 6 时，我想得到：

jQuery 可以吗？

很容易。在 jQuery 文档中查找如何删除和插入子项。

【解决方案1】：

如果排序应该只在视觉上反映，您可以使用 flex-box 并使用 order 属性

function changeOrder(){
   $("#three").addClass("last");
   $("#four").addClass("middle");
}

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
}

.last{
  order: 4;
}

.middle{
  order: 3;
}

我知道 order 属性，但如何保持 onClick 的 order 并更改单击元素的位置仍然是同样的问题
您可以在点击时更改该属性
是的，但是我如何用 jQuery 以简单的方式做到这一点？更改单击的项目很容易。剩下的呢？
@Asaf - 我用一个完整的例子重构了我的答案，供您请求。现在清楚了吗？
是的，但我认为有比一个一个地做更好的方法。这就是问题所在。无论如何 תודה

分享于2022年07月17日 javascript jquery sorting 问答