Question

我试图在特定行中对div（用数据属性标识）进行排序：

＆＃13;

<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>

＆＃13;

现在，我有一个数组：

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

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

＆＃13;

<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>

＆＃13;

我不清楚如何做到这一点。我已经尝试用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>

按特定顺序排序div

1 个答案: