Sorting DIV with IDs in ascending and descending order

Question

I'm having trouble trying to sort a list of buttons with content in ascending and descending order in HTML/CSS/JAVASCRIPT (ie. Anteater, Baboon, Cat...).

Originally, I wanted to use my BUTTON IDs to sort but I couldn't work it out.

I've looked on the net and found some code that works using text inside a DIV/button, but the code doesn't work on my page properly.

Here's the sample code that works:

 var $divs = $("button.bingo_button_4"); $('#alphBnt').on('click', function() { var alphabeticallyOrderedDivs = $divs.sort(function(a, b) { return $(a).find("h1").text() > $(b).find("h1").text(); }); $("#bingo_width_x").html(alphabeticallyOrderedDivs); }); $('#numBnt').on('click', function() { var numericallyOrderedDivs = $divs.sort(function(a, b) { return $(a).find("h1").text() < $(b).find("h1").text(); }); $("#bingo_width_x").html(numericallyOrderedDivs); }); 

 body { background: #eee; font-family: sans-serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id="alphBnt">Ascending</button> <button id="numBnt">Descending</button> <div id="bingo_width_x"> <button class="bingo_button_4"> <h1>B</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>A</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>D</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>C</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>E</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>F</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>G</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>H</h1><DIV>asdf</DIV> </button> <button class="bingo_button_4"> <h1>U</h1><DIV>asdf</DIV> </button> </div> 

Here's my code:

 function order_bingo_item(text_order) { var order_type = text_order; var $divs = $("button.bingo_button_4"); if (order_type=='ascending') { var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { return $(a).find("idn").text() > $(b).find("idn").text(); }); $("#bingo_width").html(alphabeticallyOrderedDivs); } else if (order_type=='descending') { var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { return $(a).find("idn").text() < $(b).find("idn").text(); }); $("#bingo_width").html(alphabeticallyOrderedDivs); } } 

 .bingo_button_4 idn { color: black; font-size: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id="alphBnt" onclick=order_bingo_item('ascending');>Ascending</button> <button id="numBnt" onclick=order_bingo_item('descending');>Descending</button> <div id="bingo_width" class="bingo_width" style="border:solid 2px; width:px;"> <button id="ID_grid_101_3_user" class="bingo_button_4"> <idn>3</idn> <div style="position:relative; width:100%; height:100%; text-align:center;"> bear </div> </button> <button id="ID_grid_101_0_user" class="bingo_button_4"> <idn>0</idn> <div style="position:relative; width:100%; height:100%; text-align:center;"> ant-eater </div> </button> <button id="ID_grid_101_15_user" class="bingo_button_4"> <idn>15</idn> <div style="position:relative; width:100%; height:100%; text-align:center;"> cobra </div> </button> </div> 

Basically, it's not sorting each button using "idn" in each button properly. My list of buttons is a lot bigger than this and the order is all wrong (like a random order). What seems to be the problem?

Answer 1

Try this:

 function order_bingo_item(text_order) { var order_type = text_order; var $divs = $("button.bingo_button_4"); if (order_type=='ascending') { var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { return $(a).find("idn").text() - $(b).find("idn").text(); }); $("#bingo_width").html(alphabeticallyOrderedDivs); } else if (order_type=='descending') { var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { return $(b).find("idn").text() - $(a).find("idn").text(); }); $("#bingo_width").html(alphabeticallyOrderedDivs); } } 

 .bingo_button_4 idn { color: black; font-size: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id="alphBnt" onclick=order_bingo_item('ascending');>Ascending</button> <button id="numBnt" onclick=order_bingo_item('descending');>Descending</button> <div id="bingo_width" class="bingo_width" style="border:solid 2px; width:px;"> <button id="ID_grid_101_3_user" class="bingo_button_4"> <idn>3</idn> <div style="position:relative; width:100%; height:100%; text-align:center;"> bear </div> </button> <button id="ID_grid_101_0_user" class="bingo_button_4"> <idn>0</idn> <div style="position:relative; width:100%; height:100%; text-align:center;"> ant-eater </div> </button> <button id="ID_grid_101_15_user" class="bingo_button_4"> <idn>15</idn> <div style="position:relative; width:100%; height:100%; text-align:center;"> cobra </div> </button> </div> 

Sorting integers is bit different. You need to do

a - b instead of a > b