Question

我有一个带有2个数据属性的li元素，基本上我想先排序数据排列属性，这是元素

 <ul>
        <li data-arrange="2" data-rdays="100">John</li>
        <li data-arrange="1" data-rdays="300">Paul</li>
        <li data-arrange="1" data-rdays="500">Bryan</li>
        <li data-arrange="3" data-rdays="240">Mark</li>
        <li data-arrange="3" data-rdays="500">Victor</li>
        <li data-arrange="4" data-rdays="200">Tess</li>
    </ul>

所以从给定元素来看它应该像这样返回

数据排列属性值排列

然后我想基于数据排列属性排列将data-rdays属性从最高到最低排序，所以它看起来像这样

结果应该是这样的

Bryan
Paul
John
Victor
Mark
Tess

这是我到目前为止所尝试的：

function sort_li(a, b){
        return ($(b).data('arrange')) < ($(a).data('arrange')) ? 1 : -1; 

  /* Other return staments that I've tried
      return ($(a).data('rdays') && $(b).data('arrange')) < ($(b).data('rdays') 
      && $(a).data('arrange')) ? 1 : -1;     
     return new Date($(a).data("date")) - new Date($(b).data("date")); */

     }

有什么办法可以实现这个目标吗？谢谢。

Answer 1

您可以使用arrange对arrange数据以及rdays数据上的array#sort数据排序数据进行排序。

$(function() {
  $("ul li").sort((a,b) => {
      return $(a).data('arrange') - $(b).data('arrange') || $(b).data('rdays') - $(a).data('rdays');
  }).appendTo('ul');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-arrange="2" data-rdays="100">John</li>
  <li data-arrange="1" data-rdays="300">Paul</li>
  <li data-arrange="1" data-rdays="500">Bryan</li>
  <li data-arrange="3" data-rdays="240">Mark</li>
  <li data-arrange="3" data-rdays="500">Victor</li>
  <li data-arrange="4" data-rdays="200">Tess</li>
</ul>

Answer 2

这应首先按排序顺序排序，然后按降序排序rdays属性。

function sort_li(a, b) {
    const arrangeA = +($(a).data('arrange');
    const arrangeB = +$(b).data('arrange');

    if (arrangeA !== arrangeB) {
        // sort arrange in ascending order
        return arrangeA < arrangeB ? -1 : 1;
    }

    const rdaysA = +($(a).data('rdays');
    const rdaysB = +$(b).data('rdays');

    if (rdaysA !== rdaysB) {
        // sort rdays in descending order
        return rdaysA > rdaysB ? -1 : 1;
    }

    return 0;
}

使用jquery排序按两个数据属性对元素进行排序

2 个答案: