Sort Dom Elements By Attribute JS/Jquery

Question

My sort function doesn't work if one of the attribute has no value: E.G:

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 As you can see from screen shoot only sort from 6.

How can I sort the empty values to the bottom? or how to get around this issue?

Thanks.

epascarello · Accepted Answer · 2020-02-24 15:14:27Z

2

Set the blank data points to use max value

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>

numbers with decimals

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>

edited Feb 24, 2020 at 15:14

answered Feb 3, 2020 at 15:20

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Juliano Over a year ago

Good solution it also works I was also missing parseInt which in my case I was using with dynamic distance and float point which in case of 100.0 and 50.0 it would not sort as expected thanks for the suggestion.

Juliano Over a year ago

I have used you solution it worked until the introduction of float pointing number however it fixed by changing to parseFloat but there is yet another introduction which is 0.0 it doesn't work, What could I try ? call another function in the end to move element at the top any suggestion thks

epascarello Over a year ago

well 0 would be considered a falsely value so you would need to use w3schools.com/jsref/jsref_isNaN.asp

Juliano Over a year ago

Awesome! Super Thnks

Karue Benson Karue Over a year ago

sort from highest to the lowest, any solution?

|

Juliano · Accepted Answer · 2020-02-03 14:58:56Z

1

found my answer 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)));

The above works for me it can be applied in DOM elements in case!

answered Feb 3, 2020 at 14:58

Juliano

1371 silver badge12 bronze badges

Collectives™ on Stack Overflow

Sort Dom Elements By Attribute JS/Jquery

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related