Jquery在DIV标记中对子元素进行排序

时间:2014-11-19 19:00:18

标签: jquery html

我想使用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);

1 个答案:

答案 0 :(得分:0)

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完全解释了如何做你想做的事情