Sort Number Order by Javascript

Question

I have following HTML item class elements to sort for Numerical Descending order.

<div id="main">
<div class="item" data-order="2">
<div class="stamp">13/10/2018 11:45 am EDT</div>
</div>
<div class="item" data-order="3">
<div class="stamp">13/10/2018 10:45 am EDT</div>
</div>
<div class="item" data-order="1">
<div class="stamp">12/10/2018 8:45 pm EDT</div>
</div>
<div class="item" data-order="0">
<div class="stamp">13/10/2018 10:43 am EDT</div>
</div>

For some reasons, following code is not working for me. What am I missing at sorting?

  var d = $('#main').sort(function (a, b) { 
  return $(a).find(".item").attr("data-order") < $(b).find(".item").attr("data-order"); 
  });

  console.log(d[0]);

Youre HTML is broken. Having said that, changing `.attr('data-order')` to `.data('order')` should (almost) do the trick. — Salman A, Oct 13 '18 at 16:14

Calvin Ellis · Answer 1 · 2018-10-13T16:42:42.173

0

try changing .attr("data-order") to .data('order') as seen below

.data()

var d = $('#main').children("div").sort(function (a, b) { 
      var difference = $(a).data('order') - $(b).data('order');
      
      if(difference < 0)
         return -1;
      if(difference > 0)
         return 1;
       return 0;
       
});

console.log(d);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div class="item" data-order="2">
    <div class="stamp">13/10/2018 11:45 am EDT</div>
  </div>
  <div class="item" data-order="3">
    <div class="stamp">13/10/2018 10:45 am EDT</div>
  </div>
  <div class="item" data-order="1">
    <div class="stamp">12/10/2018 8:45 pm EDT</div>
  </div>
  <div class="item" data-order="0">
    <div class="stamp">13/10/2018 10:43 am EDT</div>
</div>

edited Oct 13 '18 at 16:42

answered Oct 13 '18 at 16:13

Calvin Ellis

325
2
8

Is this in reference to the sort function return line comparison? If so, could you explain the reasoning? – Calvin Ellis Oct 13 '18 at 16:18
How will you determine the order with only `true` and `false` when there are three conditions: `a > b`, `a == b` and `a < b`? [`Array.prototype.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description) – Andreas Oct 13 '18 at 16:19
For this particular case we only need true and false since there are no collisions in the data. For a more complete and flexible answer you are correct we would want to convert the comparison to return -1, 0 or 1. However, substracting the two values wouldn't do this either because any number except for 0 and NaN will cast to true. – Calvin Ellis Oct 13 '18 at 16:26
1

It's not about _"in this case this will be enough"_, it's about specifications. And the [specification](https://www.ecma-international.org/ecma-262/6.0/#sec-sortcompare) for `.sort()` and it's `compareFunction` defines, that `compareFunction` has to return a negative value (`-1`), zero or a positive value (`1`). – Andreas Oct 13 '18 at 16:28
@CalvinEllis returning true or false (0/1) is absolutely wrong. See [this question](https://stackoverflow.com/q/24080785/87015). As for "in this case" part there is no collision here `[5, 8, 7, 1, 2, 3, 4, 6, 9, 10, 11, 12, 13].sort((a, b) => a < b);` but result is incorrect. – Salman A Oct 13 '18 at 16:32
@Andreas I see what you are saying now. I was wrong. I have updated the answer to reflect the corrections. – Calvin Ellis Oct 13 '18 at 16:35

Sunil Singh · Answer 2 · 2018-10-13T16:23:57.237

0

Along with fix it be will faster

var d = $('#main .item').sort(function (a, b) { 
  return $(a).data("order") - $(b).data("order"); 
  });

  console.log(d);

edited Oct 13 '18 at 16:23

answered Oct 13 '18 at 16:14

Sunil Singh

11,001
2
27
48

2

You don't need `parseInt()`. [jQuery](https://api.jquery.com/data/) will try to convert the values automatically: _"Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null)."_ – Andreas Oct 13 '18 at 16:22

score 0 · Answer 3 · answered Oct 13 '18 at 17:12

0

Do it this way :

<script type="text/javascript">
var items = document.querySelectorAll('.item');
var itemPos = [];

for(var i in items){

    if(items.length > i){

        itemPos.push(items[i].getAttribute('data-order'));

    }

}

itemPos = itemPos.sort(function(a, b){return b - a});

<script>

answered Oct 13 '18 at 17:12

Daggie Blanqx - Douglas Mwangi

2,309
23
28

the sorting looks work. but the ItemPos is just number sorting only. It doesn't carry the whole block. I want to have whole block to be sort out. How can I have whole block? `

13/10/2018 11:50 am EDT

13/10/2018 11:45 am EDT

` – Keyme Oct 14 '18 at 11:38

Sort Number Order by Javascript

3 Answers3

Along with fix it be will faster