Jquery对DIV标签中的子元素进行排序答案

【问题标题】：Jquery sort child elements in DIV tageJquery对DIV标签中的子元素进行排序
【发布时间】：2014-11-20 03:20:57
【问题描述】：

我想使用 Jquery 对 DIV 标记中的元素进行排序。我使用了下面的代码，但没有工作。

jquery：

function onClick() {
    $('#executiongraph > span').toArray().sort(function (a, b) {
        a.id - b.id
    });
}

html:

<div id="executiongraph">
<span class="actionname" id="40">DummyAction1</span>
<span class="actionname" id="20">DummyAction3</span>
<span class="actionname" id="10">DummyAction2</span>
<span class="actionname" id="30">DummyAction1</span>
</div>

预期 o/p：

 <div id="executiongraph">
   <span class="actionname" id="10">DummyAction2</span>
   <span class="actionname" id="20">DummyAction3</span>
   <span class="actionname" id="30">DummyAction1</span>
   <span class="actionname" id="40">DummyAction1</span>
 </div>

我找到了答案：

// 获取元素数组

               var myArray1 = $("#executiongraph span");
               var count = 0;

               // sort based on timestamp attribute
               myArray1.sort(function (a, b) {

                   // convert to integers from strings
                   a = parseInt($(a).attr("id"), 10);
                   b = parseInt($(b).attr("id"), 10);
                   count += 2;
                   // compare
                   if (a > b) {
                       return 1;
                   } else if (a < b) {
                       return -1;
                   } else {
                       return 0;
                   }
               });

               $("#executiongraph").append(myArray1);

【问题讨论】：

第一：排序函数不返回任何东西，第二：为什么你期望一个排序的dom节点数组有排序dom节点的效果
stackoverflow.com/q/10186192/1529630, stackoverflow.com/q/24342242/1529630, stackoverflow.com/q/11545960/1529630

标签： jquery html

【解决方案1】：

sort 要求您返回一个整数来控制排序。例如，在你的情况下，你会有类似的东西

if(a.id == b.id) return 0; 
if(a.id < b.id) return -1; 
else return 1; // a.id > b.id

此外，处理元素排序的 jQuery 代码也存在一些问题。首先call $('#executiongraph > span') 已经返回了一个jQuery 对象数组，所以toArray() 是多余的。最后，您需要从 executiongraph div 中删除元素，然后按排序顺序重新插入它们。

This article完美解释了如何做你想做的事

【讨论】：