jquery sorting not working in firefox and working in chrome and IE

Question

<div id="container" data-price="30.00">30.00</div>
<div id="container" data-price="62.00">62.00</div>
<div id="container" data-price="12.00">12.00</div>
<div id="container" data-price="45.00">45.00</div>
<div id="container" data-price="28.00">28.00</div>

function sorterDesc(a, b) {
    return b.getAttribute('data-price') - a.getAttribute('data-price');
};

var sortedDivs = $('#container').toArray().sort(sorterDesc);
$.each(sortedDivs, function(index, value) {
    $('#container').append(value);
});

The above sorting is working in chrome and IE but not working in firefox. what was wrong in this code?

`.getAttribute('data-price')` returns string. You need to parse it to integer first. — Jamie, Apr 01 '16 at 06:15
Did you try in your sorting function to cast the data as float ? — Loufylouf, Apr 01 '16 at 06:15
Possible duplicate of [Javascript returns NaN](http://stackoverflow.com/questions/13771002/javascript-returns-nan) — Jamie, Apr 01 '16 at 06:16
I tried your code in FF, and got an error HierarchyRequestError. You might wanna check this out [HierarchyRequestError](http://stackoverflow.com/questions/1256394/what-exactly-can-cause-an-hierarchy-request-err-dom-exception-3-error) — JF-Mechs, Apr 01 '16 at 06:20
one more thing, id should be unique . so you might wanna consider putting **.container** as a class and not as an ID :) — JF-Mechs, Apr 01 '16 at 06:23
hi jamie, before return value i want to covert string to integer ? — Sudha Jayakumar, Apr 01 '16 at 06:31
I tried to change those Id to class and put them into a **div#container** and it works well in chrome/ff/ie. [Working Fiddle](https://jsfiddle.net/ooym87ga/). check it — JF-Mechs, Apr 01 '16 at 06:40

score 0 · Answer 1 · answered Apr 01 '16 at 06:40

this code now run in all browser.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
   
</head>
<body>
    <div id="container" data-price="30.00">30.00</div>
    <div id="container" data-price="62.00">62.00</div>
    <div id="container" data-price="12.00">12.00</div>
    <div id="container" data-price="45.00">45.00</div>
    <div id="container" data-price="28.00">28.00</div>
    <div id="sortedDiv"></div>
</body>
</html>

<script type="text/javascript">
    function sorterDesc(a, b) {
        return b.getAttribute('data-price') - a.getAttribute('data-price');
    };

    var sortedDivs = $('[id*=container]').toArray().sort(sorterDesc);
    $.each(sortedDivs, function (index, value) {
        $('#sortedDiv').append(value);
    });
</script>

jquery sorting not working in firefox and working in chrome and IE

1 Answers1