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

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

我有这份清单

<div class="scroll-images">

  <div class="item" data-order="0">

  </div>
  <div class="item active" data-order="1">

    <div class="item" data-order="2">

      <div class="item" data-order="3">

      </div>
      <div class="item" data-order="4">

      </div>
      <div class="item" data-order="5">

      </div>
      <div class="item" data-order="6">

      </div>
      <div class="item" data-order="7">

      </div>
    </div>

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

<div class="scroll-images">

  <div class="item" data-order="5">

  </div>
  <div class="item active" data-order="6">

    <div class="item" data-order="7">

      <div class="item" data-order="0">

      </div>
      <div class="item" data-order="1">

      </div>
      <div class="item" data-order="2">

      </div>
      <div class="item" data-order="3">

      </div>
      <div class="item" data-order="4">

      </div>
    </div>

jQuery 可以吗？

【问题讨论】：

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

标签： javascript jquery sorting

【解决方案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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container">
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div> 
  <div id="four">4</div>
</div>

<button onClick="changeOrder()">
  change order
</button>

【讨论】：

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