Сортировать элементы Dom по атрибуту JS / Jquery - PullRequest
0 голосов
/ 31 января 2020

Моя функция сортировки не работает, если один из атрибутов не имеет значения: EG:

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>

введите описание изображения здесь Как видно из снимка экрана, выберите только 6. 6. 1015 *

Как можно отсортировать пустые значения ко дну? или как обойти эту проблему?

Спасибо.

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

Установите пустые точки данных для использования максимального значения

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>

числа с десятичными знаками

function sortEventsByOrder(a, b) {
  var orderA = $(a).data('order')
  var orderB = $(b).data('order')
  const startA = orderA === "" ? Number.MAX_VALUE: +orderA;
  const startB = orderB === "" ? Number.MAX_VALUE: +orderB;
  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="0"> Element 1
  </li>
  <li data-order="2.2"> Element 2
  </li>
  <li data-order="2.3"> Element 4
  </li>
</ul>
0 голосов
/ 03 февраля 2020

нашел мой ответ Сортируйте массив так, чтобы нулевые значения всегда были последними :

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

Вышеприведенное работает для меня, оно может применяться в элементах DOM в случае!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...