如何在javascript中按id排序div？

我有以下HTML代码：

<div id="main">
  <div id="dv_7">...</div>
  <div id="dv_1">...</div>
  <div id="dv_8">...</div>
  <div id="dv_4">...</div>
  <div id="dv_11">...</div>
  <div id="dv_2">...</div>
</div>

...
...
...
...
...
...

如何使用javascript在maindiv中排序div？我不知道：(

---

提前感谢，

以下方法可能有效：

var main = document.getElementById("main");
for(var i = 11; i > -1; i--) {
    var div = document.getElementById("dv_" + i);
    if(div != null)
        main.appendChild(div);
}

---

希望这有帮助。更新了id以说明字母顺序1和11

<div id="main">
  <div id="dv_07">7...</div>
  <div id="dv_01">1...</div>
  <div id="dv_08">8...</div>
  <div id="dv_04">4...</div>
  <div id="dv_11">11...</div>
  <div id="dv_02">2...</div>
</div>​

7.
1.
8.
4.
11...
2.
​

jQuery选项：

var mylist = $('#main');
var listitems = mylist.children('div').get();
listitems.sort(function(a, b) {
    var compA = $(a).attr('id').toUpperCase();
    var compB = $(b).attr('id').toUpperCase();
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) {
    mylist.append(itm);
});​

var mylist=$（'#main'）；
var listitems=mylist.children（'div'）.get（）；
排序（函数（a，b）{
var compA=$（a）.attr（'id'）.toUpperCase（）；
var compB=$（b）.attr（'id'）.toUpperCase（）；
返回（compAcompB）？1:0；
})
$.each（列表项、函数（idx、itm）{
mylist.append（itm）；
});​

Javascript选项：

var mylist = document.getElementById('main');
var divs = mylist.getElementsByTagName('div');
var listitems = [];
for (i = 0; i < divs.length; i++) {
        listitems.push(divs.item(i));
}
listitems.sort(function(a, b) {
    var compA = a.getAttribute('id').toUpperCase();
    var compB = b.getAttribute('id').toUpperCase();
    return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
for (i = 0; i < listitems.length; i++) {
    mylist.appendChild(listitems[i]);
}​

var mylist=document.getElementById（'main'）；
var divs=mylist.getElementsByTagName（'div'）；
var listitems=[]；
对于（i=0；icompB）？1:0；
});
对于（i=0；i

对于适用于任意数字范围内任意数字的子div的解决方案，您可以使用如下函数（实际解析ID的数字并对其进行真正的数字排序）：

函数sortChildrenDivsById（parentId）{
var parent=document.getElementById（parentId）；
//获得儿童divs
var children=parent.getElementsByTagName（“div”）；
变量id=[]，obj，i，len；
//构建一个包含两个元素的对象数组
//还有一个解析过的div数，这样我们就可以排序了
for（i=0，len=children.length；i

此处的工作示例：

仅供参考，这是跨浏览器、纯javascript，甚至可以在没有垫片的旧浏览器中工作

---

下面是另一种使用少量代码的方法：

function sortChildrenDivsById(parentId) {
    var parent = document.getElementById(parentId);
    var children = parent.getElementsByTagName("div");
    var ids = [], i, len;
    for (i = 0, len = children.length; i < len; i++) {
        ids.push(parseInt(children[i].id.replace(/^.*_/g, ""), 10));
    }
    ids.sort(function(a, b) {return(a - b);});
     for (i = 0, len = ids.length; i < len; i++) {
         parent.appendChild(document.getElementById("dv_" + ids[i]));
     }
}

函数sortChildrenDivsById（parentId）{
var parent=document.getElementById（parentId）；
var children=parent.getElementsByTagName（“div”）；
变量id=[]，i，len；
for（i=0，len=children.length；i

工作示例：

所有的id NUM都被解析出来并放入一个数组中，数组被排序，然后根据id查找每个对象并按排序顺序重新插入。这不会像第一个那么快，但代码更少。

怎么样：

var main = document.getElementById( 'main' );

[].map.call( main.children, Object ).sort( function ( a, b ) {
    return +a.id.match( /\d+/ ) - +b.id.match( /\d+/ );
}).forEach( function ( elem ) {
    main.appendChild( elem );
});

现场演示：

---

（您需要为IE8填充这些数组方法。）

以下与IE 5和类似浏览器兼容，没有垫片或库。排序功能可以修改为数字排序，目前它将div排序为1、11、2、4等。更改它并不难，因此它们被排序为1、2、4、…11

function sortDivs(div) {
  var divs = div.getElementsByTagName('div');
  var a = [];
  for (var i=0, iLen=divs.length; i<iLen; i++) { 
    a[i] = divs[i];
  }
  a.sort(function(a, b) {
    return a.id < b.id? -1 : a.id == b.id? 0 : 1;
  });
  while (iLen--) {
    div.insertBefore(a[iLen], div.firstChild);
  }
}

window.onload = function() {
  sortDivs(document.getElementById('main'));
}

功能sortDivs（div）{
var divs=div.getElementsByTagName（'div'）；
var a=[]；
对于（var i=0，iLen=divs.length；如果（div！=null）

和

document.getElementById（“main”）；

我认为，作用域查询的性能更好：

var div=main.querySelector（“#dv"+i”）

这假设文档中其他任何地方都没有dv_nn ID，它需要硬编码数字的上限，而不仅仅是对存在的项目进行排序，不管有多少。这是jQuery。OP没有要求jQuery。感谢jfriend00指出这一点。更新为添加javascript版本。

getElementsByTagName（'div'）

将只返回div元素，因此节点类型测试是多余的。您可以在IE8中将节点列表设置为数组方法的调用上下文吗？…或者我认为这无关紧要，因为它们已填充了垫片！：P@amnotiam是的。添加ES5垫片将使我的演示在IE8中工作：@jfriend00

。IE6-8中确实存在子项，但它还包括comment节点（这在本应用程序中不应成为问题）。IE7只剩下3-5%，应该很快就会消亡。如果需要IE7支持，应该使用跨浏览器库。手动填充浏览器是不可行的（因为有太多的问题需要修复）.@amnotiam啊，当然。DOM选择是不需要的，因为我们已经在
main.children
中有了所有引用。我进一步简化了代码。@amnotiam是的，你是对的。
[].slice.call（nodeList）
在IE7/8中不起作用。
[].map.call（main.children，Object）
在那些浏览器中起作用-这是一个不错的破解。
function sortDivs(div) {
  var divs = div.getElementsByTagName('div');
  var a = [];
  for (var i=0, iLen=divs.length; i<iLen; i++) { 
    a[i] = divs[i];
  }
  a.sort(function(a, b) {
    return a.id < b.id? -1 : a.id == b.id? 0 : 1;
  });
  while (iLen--) {
    div.insertBefore(a[iLen], div.firstChild);
  }
}

window.onload = function() {
  sortDivs(document.getElementById('main'));
}

function sortDivs(div) {
  var divs = div.getElementsByTagName('div');

  // Convert divs collection to an array
  for (var i=0, iLen=divs.length, a=[]; i<iLen; i++) a[i] = divs[i];

  // Sort the array numerically
  a.sort(function(a, b) {
    return a.id.split('_')[1] - b.id.split('_')[1]; 
  });

  // Move elements to sorted order
  while (iLen--) div.insertBefore(a[iLen], div.firstChild);
}