Question

I have this HTML

<td colspan="4" class="item"> DERBY LINE, VT 05830<br>
    <label for="" data-sort="16.26">UPS Ground $16.26</label><br>
    <label for="" data-sort="27.57">UPS 3 Day Select&reg; $27.57</label><br>
    <label for="" data-sort="33.87">UPS 2nd Day Air&reg; $33.87</label><br>
    <label for="" data-sort="72.82">UPS Next Day Air $72.82</label><br>
    <label for="" data-sort="7.99">USPS Priority $7.99</label><br>
    <label for="" data-sort="9.61">FEDEX SmartPost&reg; FedEx Delivered Via USPS $9.61</label><br>
    &nbsp;
    <input type="button" name="Button5" id="Button5" onmouseout="this.className='btn'" onmouseover="this.className='btn_over'" onclick="document.shipquote.action='shipquote.asp?action=clean';document.shipquote.submit();" value="Clear" class="btn">
</td>

And I need it to be sort it by the “data-sort” attribute, right now I’m using
this element sorter
but when I run the scripts it returns this

<td colspan="4" class="item"> DERBY LINE, VT 05830<br>
    <label for="" data-sort="16.26">UPS Ground $16.26</label><br>
    <label for="" data-sort="27.57">UPS 3 Day Select&reg; $27.57</label><br>
    <label for="" data-sort="33.87">UPS 2nd Day Air&reg; $33.87</label><br> 
    <label for="" data-sort="7.99">USPS Priority $7.99</label><br>
    <label for="" data-sort="72.82">UPS Next Day Air $72.82</label><br>
    <label for="" data-sort="9.61">FEDEX SmartPost&reg; FedEx Delivered Via USPS $9.61</label><br>
    &nbsp;
    <input type="button" name="Button5" id="Button5" onmouseout="this.className='btn'" onmouseover="this.className='btn_over'" onclick="document.shipquote.action='shipquote.asp?action=clean';document.shipquote.submit();" value="Clear" class="btn">
</td>

as you can see it runs but for some reason it gets just the first number on the attr. The call I’m using is the following one :

$('.item label').sortElements(function(a, b){
    return $(a).attr("data-sort") > $(b).attr("data-sort") ? 1 : -1;
});       

What Am I doing wrong?

Answer 1

It looks like it’s currently treating each value as a string and sorting them in the respective order, 1 – 9. You should be using parseFloat() to convert the values from a string to a float to ensure that the comparison is done correctly:

$('.item label').sortElements(function(a, b){
   return parseFloat($(a).attr("data-sort")) > parseFloat($(b).attr("data-sort")) ? 1 : -1;
});  

Or use the .data() method instead, which will automatically interpret the numbers as floats:

$('.item label').sortElements(function(a, b){
   return $(a).data("sort") > $(b).data("sort") ? 1 : -1;
});