按属性JS / Jquery对Dom元素进行排序

问题描述 投票:0回答:2

如果其中一个属性没有值,例如我的排序功能不起作用:例如:

JS:

function sortEventsByOrder(a,b) {
        const startA = parseInt($(a).data('order'));
        const startB = parseInt($(b).data('order'));    
        return startA - startB;
    }
    $('#eventList').html($('#eventList li').sort(sortEventsByOrder))

HTML:

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>

  <body>


<ul id="eventList">
   <li data-order="5">Element 5</li>
   <li data-order="">Element 3</li>
   <li data-order="6">Element 6</li>
   <li data-order="1">Element 1</li>
   <li data-order="2">Element 2</li>
   <li data-order="4">Element 4</li>
</ul>
  </body>
</html>

enter image description here如您从屏幕快照中看到的,仅从6开始排序。

如何将空值排序到底部?或如何解决这个问题?

谢谢。

javascript sorting dom
2个回答
0
投票

找到我的答案Sort an array so that null values always come last

function alphabetically(ascending) {

return function (a, b) {

// equal items sort equally
if (a === b) {
    return 0;
}
// nulls sort after anything else
else if (a === null) {
    return 1;
}
else if (b === null) {
    return -1;
}
// otherwise, if we're ascending, lowest sorts first
else if (ascending) {
    return a < b ? -1 : 1;
}
// if descending, highest sorts first
else { 
    return a < b ? 1 : -1;
}

};

}

 var arr = [null, 'a', 'b', null, 'd'];

 console.log(arr.sort(alphabetically(true)));
 console.log(arr.sort(alphabetically(false)));

上面的代码对我有用,以防万一!


0
投票

设置空白数据点以使用最大值

function sortEventsByOrder(a, b) {
  const startA = parseInt($(a).data('order')) || Number.MAX_VALUE;
  const startB = parseInt($(b).data('order')) || Number.MAX_VALUE;
  return startA === startB ? 0 : startA > startB ? 1 : -1;
}

$('#eventList').append($('#eventList li').sort(sortEventsByOrder))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="eventList">
  <li data-order="5"> Element 5
  </li>
  <li data-order=""> Element 3
  </li>
  <li data-order="6"> Element 6
  </li>
  <li data-order="1"> Element 1
  </li>
  <li data-order="2"> Element 2
  </li>
  <li data-order="4"> Element 4
  </li>
</ul>
© www.soinside.com 2019 - 2024. All rights reserved.