jquery - 按特定顺序对 div 进行排序

Question

我正在尝试对特定行中的 div(用数据属性标识)进行排序:

<div id="sortablesParent">
  <div class="sortable" data-key="1"></div>
  <div class="sortable" data-key="2"></div>
  <div class="sortable" data-key="3"></div>
  <div class="sortable" data-key="4"></div>
</div>

现在，我得到了一个数组:

var order = ["4", "2", "3", "1"];

正如您所料，输出 HTML 应如下所示:

<div id="sortablesParent">
  <div class="sortable" data-key="4"></div>
  <div class="sortable" data-key="2"></div>
  <div class="sortable" data-key="3"></div>
  <div class="sortable" data-key="1"></div>
</div>

我不知道如何做到这一点。我已经尝试用 jQuery.sort() 做一些事情，但并没有真正找到一个好的方法。当然我也看过类似的问题，但这些对我没有帮助。

Answer 1

.sort 可以工作，但是由于 div 已经在 DOM 中，因此您应该将排序后的 div 保存到变量中，并在排序后将它们放回父 div 中。

var order = ['4', '3', '2', '1'];

var html = $('#sortablesParent div').sort(function(a, b) {
  var l = $.inArray($(a).attr('data-key'), order);
  var r = $.inArray($(b).attr('data-key'), order);
  return (l < r) ? -1 : (l > r) ? 1 : 0;
});

$('#sortablesParent').html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sortablesParent">
  <div class="sortable" data-key="4">4</div>
  <div class="sortable" data-key="2">2</div>
  <div class="sortable" data-key="3">3</div>
  <div class="sortable" data-key="1">1</div>
</div>