按特定顺序排序div

时间:2016-06-29 15:57:03

标签: jquery html arrays sorting dom

我试图在特定行中对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>
&#13;
&#13;
&#13;

现在,我有一个数组:

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

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

&#13;
&#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;
&#13;
&#13;

我不清楚如何做到这一点。我已经尝试用jQuery.sort()做了一些事情,但是真的找不到一个好的方法。 当然,我看过类似的问题,但这些对我无能为力。

1 个答案:

答案 0 :(得分:4)

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