Actualmente tengo algunos problemas para ordenar automáticamente algunos botones por su valor en Firefox. Esto funciona en Chrome, pero no estoy seguro de por qué no funciona en Firefox. Mi objetivo es que esto funcione para cualquiera de los navegadores. Cualquier ayuda sería apreciada.
Y el código que funciona en Chrome se encuentra en esta pregunta de StackOverflow:
// Sort Buttons based on their Values. const buttonContainer = $("#B1CSTButtonContainer")[0]; const sortedButtons = [...buttonContainer.children].sort((buttonA, buttonB) => { const value1 = buttonA.value; const value2 = buttonB.value; if (value1 === value2) { return 0; } else if (value1 < value2) { return -1; } else { return 0; } }); sortedButtons.forEach(button => buttonContainer.append(button)); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="B1CSTButtonContainer" style="border: 2px solid grey; border-radius: 5px; display: inline-block; padding: 2px; width: 100%;"> <button id="B1CSTERButton" value="11" style="float: left; margin: 2px;">ER</button> <button id="B1CSTCMButton" value="06" style="float: left; margin: 2px;">CM</button> <button id="B1CSTITMAButton" value="08" style="float: left; margin: 2px;">ITMA</button> <button id="B1CST3DARButton" value="09" style="float: left; margin: 2px;">3DAR</button> <button id="B1CST7DARButton" value="10" style="float: left; margin: 2px;">7DAR</button> <button id="B1CSTPRButton" value="05" style="float: left; margin: 2px;">PR</button> <button id="B1CSTPSButton" value="04" style="float: left; margin: 2px;">PS</button> <button id="B1CSTPSOAButton" value="07" style="float: left; margin: 2px;">PSOA</button> <button id="B1CSTPTButton" value="03" style="float: left; margin: 2px;">PT</button> <button id="B1CSTECDButton" value="12" style="float: left; margin: 2px;">ECD</button> <button id="B1CSTRESButton" value="02" style="float: left; margin: 2px;">RES</button> <button id="B1CSTWIPButton" value="01" style="float: left; margin: 2px;">WIP</button> </div>simplemente use el método .appendChild()
(y algo de css también para que sea legible)
// Sort Buttons based on their Values --- : const buttonContainer = document.querySelector('#B1CSTButtonContainer'); [...buttonContainer.querySelectorAll('button')] .map(btn=>({btn, val: +btn.value })) .sort((a,b) => a.val - b.val) .forEach( elm => buttonContainer.appendChild(elm.btn) ) // -*-*- #B1CSTButtonContainer { border : 2px solid grey; border-radius : 5px; display : inline-block; padding : 2px; width : 100%; } #B1CSTButtonContainer > button { float : left; margin : 2px; } <div id="B1CSTButtonContainer"> <button id="B1CSTERButton" value="11" > ER </button> <button id="B1CSTCMButton" value="06" > CM </button> <button id="B1CSTITMAButton" value="08" > ITMA </button> <button id="B1CST3DARButton" value="09" > 3DAR </button> <button id="B1CST7DARButton" value="10" > 7DAR </button> <button id="B1CSTPRButton" value="05" > PR </button> <button id="B1CSTPSButton" value="04" > PS </button> <button id="B1CSTPSOAButton" value="07" > PSOA </button> <button id="B1CSTPTButton" value="03" > PT </button> <button id="B1CSTECDButton" value="12" > ECD </button> <button id="B1CSTRESButton" value="02" > RES </button> <button id="B1CSTWIPButton" value="01" > WIP </button> <button id="B1CSTSettingsButton" value="100" > ⚙ </button> <button id="B1CSTHelpButton" value="99" > ❓ </button> </div>