Sorting DIVs in a DIV using jQuery

Question

I looked at several entries on here related to this, but none specifically for alphanumeric sorting. Tried A LOT of ways today, but got no where, so I looking for help.

HTML

<div id="chartEntries">

  <div class="divEntry" rval="BBB">
        <div class="ori" style="display:none;">BBB</div>
         <h3>Value</h3>
         <span>BBB - I should come in 2nd.</span>
  </div>
   <div class="divEntry" rval="DDD">
       <div class="ori" style="display:none;">DDD</div>
         <h3>Value</h3>
         <span>DDD - I should come in 4th.</span>
  </div>
  <div class="divEntry" rval="AAA">
      <div class="ori" style="display:none;">AAA</div>
         <h3>Value</h3>
         <span>AAA - I should come in 1st.</span>
  </div>
  <div class="divEntry" rval="CCC">
      <div class="ori" style="display:none;">CCC</div>
         <h3>Value</h3>
         <span>CCC - I should come in 3nd.</span>
  </div>

</div>

I want to return the sorted .divEntry DIVs unchanged back into the #chartEntries DIV.

Tried

function sorter(a,b){
    return $(a).data('rval') > $(b).data('rval');
}

var orderedDivs = $('.divEntry').sort(sorter);
$("#chartEntries").html(orderedDivs);

also tried with .getAttribute('rval'). Any thoughts?

jsFiddle -> https://jsfiddle.net/mweidlick/tb6xpfkk/40/

Answer 1

You had it mostly correct, except you didn't need to turn your variables c and d into jquery objects for localeCompare, they're already strings so you can simply do:

output = c.localeCompare(d);

https://jsfiddle.net/tb6xpfkk/41/

Answer 2

When creating new attributes, prefix them with data-

<div id="chartEntries">
  <div class="divEntry" data-route="LAXSFO">
    <h3>LAXSFO</h3>
    <span>190 - I should come in 2nd.</span>
  </div>
  <div class="divEntry" data-route="YYZJFK">
    <h3>YYZJFK</h3>
    <span>300 - I should come in 4th.</span>
  </div>
  <div class="divEntry" data-route="ABLDFW">
    <h3>ABLDFW</h3>
    <span>100 - I should come in 1st.</span>
  </div>
  <div class="divEntry" data-route="MSPSTL">
    <h3>MSPSTL</h3>
    <span>290 - I should come in 3nd.</span>
  </div>

</div>

SCRIPT

$(function(){
    var entries = $('.divEntry').get();

  entries.sort(function(a, b){
    return $(a).data('route').toUpperCase().localeCompare($(b).data('route').toUpperCase());
  });

  $('#chartEntries').append(entries);
});

https://jsfiddle.net/tb6xpfkk/42/

Answer 3

I've changed your sorter function a bit to use a comparison similar to the way you're representing in your question and it worked.

function sorter(a, b) {
    var c = a.getAttribute('route');
    var d = b.getAttribute('route');
    var output = c.toLowerCase() > d.toLowerCase();
    return output;  
};

https://jsfiddle.net/4mt5p3p1/

I've noticed that in the example you've given, you're using data() but your attributes are not data-rval, which would justify why the example in your question won't work. But you said that you also tried getAttribute which should do the trick as you can see in the jsfiddle (so I'm not sure why it didn't work for you before).

Answer 4

You already have extracted the route value using getAttribute. So you do not need to convert into another jquery object to compare the values. Another way to do this without localeCompare would be while during comparison, you can use $.after to move the elements where they are needed.

function sorter(a, b) {
  var c = a.getAttribute('route');
  var d = b.getAttribute('route');
    output = c.toUpperCase() > d.toUpperCase();  
  if(output)
      $(b).after(a);    
};

var sortedDivs = $(".divEntry").toArray().sort(sorter);
$.each(sortedDivs, function (index, value) {
  $(".divEntry").toArray().sort(sorter);
// $("#chartEntries").append(value)
});

Working example : https://jsfiddle.net/DinoMyte/tb6xpfkk/43/