Firefox中的按钮元素未排序

Question

我目前在Firefox中遇到了一些按按钮值自动排序的问题。这在Chrome中有效，但我不知道为什么它在Firefox中不起作用。我的目标是让这项工作为任何一个浏览器。如有任何帮助，我们将不胜感激。

从这个StackOverflow问题中可以找到在Chrome中工作的代码：

// 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>

Answer 1

只需使用.appendChild()方法
(以及一些可读的css(

// 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>