在前台利用jquery对dom元素进行排序

html部分:

 1 for(var i = 0; i<chList.length; i++){
 2             $(".modal-body ul").append("<li class='rowWrap item' >" +
 3                     "<input class='chooseInput' type='checkbox'/>" +
 4                         "<label class='headName'>名头<i class='icon icon-expand-full iconSty'></i></label>" +
 5                          "<div class='rightWrap'>"+
 6                             "<span class='number min-number'>100</span>"+
 7                             "<label class='chooseWidthWrap'>"+
 8                                 "<div class='chooseChangeWline'>"+
 9                                     "<div class='fill'></div>"+
10                                 "</div>"+
11                                 "<span class='chooseChangeWcir'></span>"+
12                                 "<input class='chooseChangeWnum'readonly>"+
13                             "</label>"+
14                             "<span class='number'>400</span>"+
15                         "</div>"+
16                         "<span class='sortDefault' style='display:none'>"+chList[i].STR_QUEREN+"</span>"+
17                 "</li>");
18 19         }

js部分:

1.

 1 var divTestJQ = $(".modal-body ul"); //取得容器对象
 2     var divJQ = $(">li.rowWrap", divTestJQ); //取容器需要重排的对象
 3     var EntityList = []; //定义一个数组用于存放要排序的对象
 4     divJQ.each(function () {
 5           var thisJQ = $(this);
 6           EntityList.push({ Name: parseInt(thisJQ.attr("name")), JQ: thisJQ }); //把要排序的对象和排序的值一起放到一个新的对象里,并存入到数组
 7     });
 8     EntityList.sort(function (a, b) { //利用数组的排序方法重新排序对象
 9           //return b.Name - a.Name; //从大到小
10           return a.Name - b.Name; //从小到大
11     });
12     for (var i = 0; i < EntityList.length; i++) {
13           EntityList[i].JQ.appendTo(divTestJQ); //把排序完的对象重新插入到容器对象
14     };

2.

 1 var domList = $(".modal-body ul li").get();
 2     domList.sort(function(a,b){
 3       var elOne = $(a).find('.sortDefault').text();
 4       var elTwo = $(b).find('.sortDefault').text();
 5       //升序
 6       if(parseInt(elOne) > parseInt(elTwo)) return 1;
 7       if(parseInt(elOne) < parseInt(elTwo)) return -1;
 8       //降序
 9       if(parseInt(elOne) > parseInt(elTwo)) return -1;
10       if(parseInt(elOne) < parseInt(elTwo)) return 1;
11       return 0;
12     });
13     $('.modal-body ul').append(domList);
原文地址:https://www.cnblogs.com/nlyangtong/p/12120322.html