在Javascript中按ID排序div

Question

我有一堆div，我想根据它们的ID从低到高排序。然而，ID是5DP以下的十进制数字。

它们看起来像这样：

<div id="main">
<div id="1.6125">...</div>
<div id="1.585">...</div>
<div id="1.60125">...</div>
<div id="1.59125">...</div>
<div id="1.62625">...</div>
</div>

我看到过这样一个问题：如何在javascript中按id排序div？但当我把askers的例子改为十进制数字时，它并没有为我排序div

任何帮助都将不胜感激，无论是jQuery还是JS都可以。

非常感谢，

G

Answer 1

选择#maindiv的.children，然后通过提取每个的id并比较差异来选择sort()，然后将它们附加到#main，以便它们在DOM中按顺序排列。sort函数中的-将自动将字符串ids转换为数字：

const main = document.querySelector('#main');
const divs = [...main.children];
divs.sort((a, b) => a.id - b.id);
divs.forEach(div => main.appendChild(div));

<div id="main">
<div id="1.6125">1.6125</div>
<div id="1.585">1.585</div>
<div id="1.60125">1.60125</div>
<div id="1.59125">1.59125</div>
<div id="1.62625">1.62625</div>
</div>

Answer 2

问题是其他帖子如何比较id。

试试这个：

var main = document.getElementById( 'main' );
[].map.call( main.children, Object ).sort( function ( a, b ) {
return +a.id - +b.id;
}).forEach( function ( elem ) {
main.appendChild( elem );
});

预览：http://jsfiddle.net/x7gesv68/4/