Firefox中Button元素无法按值排序问题求助

按钮按value值自动排序的功能在Chrome中正常，但Firefox中无法生效，需要实现两款浏览器都兼容的排序效果。

原代码的问题点 #

1. 排序逻辑错误：原排序函数里，当value1 > value2时返回0，这会导致这类元素的排序位置完全不变，根本起不到排序作用。
2. 字符串比较坑：直接比较按钮value的字符串值会按字典序排序，比如"10"会被认为比"2"小，完全不符合数值排序的需求。
3. Firefox元素操作差异：原代码用append重复添加元素，Firefox对这种操作的处理和Chrome不同，可能导致排序后位置没变化。

修正后的完整代码 #

HTML代码 #

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

JavaScript代码 #

// 按按钮value值排序，兼容Chrome和Firefox
const buttonContainer = document.getElementById('B1CSTButtonContainer');
// 直接获取所有按钮元素，避免非元素节点干扰
const buttons = Array.from(buttonContainer.querySelectorAll('button'));
const sortedButtons = buttons.sort((buttonA, buttonB) => {
  // 把value转成数字，确保按数值大小排序
  const value1 = parseInt(buttonA.value, 10);
  const value2 = parseInt(buttonB.value, 10);
  // 标准升序排序逻辑
  return value1 - value2;
});
// 先清空容器再重新添加，解决Firefox的append行为差异
buttonContainer.innerHTML = '';
sortedButtons.forEach(button => buttonContainer.appendChild(button));

修正说明 #

• 修复排序逻辑：用value1 - value2实现标准的升序排序，替代原错误的返回规则，确保所有元素都能正确排序。
• 数值转换：通过parseInt把按钮的value字符串转成数字，彻底解决字典序排序的问题。
• 优化元素获取：用querySelectorAll('button')精准获取按钮元素，避免children可能带来的非元素节点问题。
• 重排方式调整：先清空容器再添加排序后的按钮，避免Firefox中重复append元素时的位置异常，保证排序后按钮顺序正确。

内容的提问来源于stack exchange，提问作者Ryan Bell