tinysort 根据自定义数组顺序对 div 进行排序答案

【问题标题】：tinysort sort divs based on custom array ordertinysort 根据自定义数组顺序对 div 进行排序
【发布时间】：2017-07-11 00:17:50
【问题描述】：

我目前正在使用 tinysort.js 插件，我想根据数组对一些 div 进行排序。我不确定如何使用 tinysort 来解决这个问题。

这是我目前拥有的：

html:

<div id="list">
    <div class="row" data-type="fruit">banana</div>
    <div class="row" data-type="fruit">apple</div>
    <div class="row" data-type="fruit">avocado</div>
    <div class="row" data-type="dairy">milk</div>
    <div class="row" data-type="other">car</div>
    <div class="row" data-type="dairy">cheese</div>
    <div class="row" data-type="grain">rice</div>
    <div class="row" data-type="grain">wheat</div>
    <div class="row" data-type="grain">barley</div>
</div>

javascript：

var $rows = $('#list .row');
var order = ['grain', 'fruit', 'dairy']; // this is the order I'd like the divs to be in

tinysort($rows, {sortFunction:function(a, b) {
    var rowA = $(a.elm).data('type');
    var rowB = $(b.elm).data('type');

    return rowA == rowB ? 0 : (rowA > rowB ? 1 : -1);
}});

如何应用 order 数组，以便对 div 进行相应排序？

【问题讨论】：

可以将 order 改为对象吗？
如果你可以通过对象实现，我可以修改你所做的以使用数组。
你使用的是 jQuery 的 tinySort 版本吗？
我正在使用这个：tinysort.sjeiti.com

标签： javascript jquery sorting tinysort

【解决方案1】：

我相信使用Array.prototype.indexOf 会起作用：

tinysort($rows, {sortFunction:function(a, b) {
    var rowA = order.indexOf($(a.elm).data('type'));
    var rowB = order.indexOf($(b.elm).data('type'));

    return rowA == rowB ? 0 : (rowA > rowB ? 1 : -1);
}});

【讨论】：

好 :) 很高兴我能帮上忙。

【解决方案2】：

如果你可以使用对象而不是数组，那么：

var $rows = $('#list .row');

var order = {   // the order is an object that maps types into an integer that represents the precedence (the lower the number the higher the precedence is)
  'grain': 0,
  'fruit': 1,
  'dairy': 2,
  'other': 3
};

tinysort($rows, {sortFunction:function(a, b) {
    var rowA = $(a.elm).data('type');
    var rowB = $(b.elm).data('type');
    
    rowA = order[rowA];  // get the integer representation of this type
    rowB = order[rowB];  // get the integer representation of this type

    return rowA == rowB ? 0 : (rowA > rowB ? 1 : -1); // if the two integers are the same (same precedence) then return 0, otherwise return either 1 or -1 depending on who's should come first using the integer representaion (I think it is self explanatory ;))
}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
<div id="list">
    <div class="row" data-type="fruit">banana</div>
    <div class="row" data-type="fruit">apple</div>
    <div class="row" data-type="fruit">avocado</div>
    <div class="row" data-type="dairy">milk</div>
    <div class="row" data-type="other">car</div>
    <div class="row" data-type="dairy">cheese</div>
    <div class="row" data-type="grain">rice</div>
    <div class="row" data-type="grain">wheat</div>
    <div class="row" data-type="grain">barley</div>
</div>

注意，如果您仍然需要该数组，则可以轻松地将其转换为等效对象：

var orderObject = orderArray.reduce((obj, t, i) => (obj[t] = i, obj), {});

注意所有类型都应该包括在内，否则排序会因为整数表示不存在而被破坏，因此undefined和number < undefined和undefined < number总是false .如果您不想在 order 变量中包含所有类型，您可以进行测试以检查它是否在 sort 函数中为 undefined。

【讨论】：