在给定的id序列中设置列表顺序

Question

我已经创建了一个可以按任意顺序排序的列表。您可以分离它的元素，并通过单击重置按钮，您将以默认顺序再次获取所有元素。我试图以特定的id序列生成列表。下面是HTML

<ul id="sortable1" class="connectedSortable"> 
    <li data-position="1" class="ui-state-default" id='item1'>Item 1 
     <a class="dummy" href="#">Detach</a> 
    </li> 
    <li data-position="2" class="ui-state-default" id='item2'>Item 2 
     <a class="dummy" href="#">Detach</a> 
    </li> 
    <li data-position="3" class="ui-state-default" id='item3'>Item 3 
    <a class="dummy" href="#">Detach</a> 
    </li> 
    <li data-position="4" class="ui-state-default" id='item4'>Item 4 
    <a class="dummy" href="#">Detach</a> 
    </li> 
    <li data-position="5" class="ui-state-default" id='item5'>Item 5 
    <a class="dummy" href="#">Detach</a> 
    </li> 
</ul> 

<button id ="reset">reset List</button> 
<button id ="new">new order</button> 

JS代码：

$(function() { 

     //to get the number of children for loop counter 
     count = 0; 
      //$("#sortable1").children().length; 
     //array to hold the detached element 
     var array = []; 

     //function to sort the list  
     $("#sortable1").sortable().disableSelection(); 


     // closure to detach the element and enter it in the array  
      var detachElement = (function (val) {    
      var counter = 0; 
      return function (val) { 
           count = counter; 
           alert(counter+" : "+val+" : "+count); 
           array[counter] = $(val).detach(); 
           counter += 1;   
          } 
     })(); 

     //call to detach the element 
     $('.dummy').on('click', function() {   
      var getID = $(this).parent().attr('id'); 
      var getIdStr = "#"+getID;  
      detachElement(getIdStr); 
     }); 

     //reset all the elements again 
     $('#reset').on('click', function(){        
       for(i=0;i<=count;i++) 
       {    
        $("#sortable1").append(array[i]); 
       } 
       count = 0; 

      /* $("#sortable1 li").sort(sort_li).appendTo('#sortable1'); 
    function sort_li(a, b){ 
     return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;  
    }*/ 
      var elems = $('#sortable1').children('li').detach(); 

     elems.sort(function(a,b){ 
      var str1 = a.id; 
      var str2 = b.id; 
      return str1.localeCompare(str2);; 
     }); 
     $('#sortable1').append(elems); 


     }); 

     //custom order of the list  
     $("#new").on('click',function(){ 

      var elems = $('#sortable1').children('li').detach(); //1,2,3,4,5 j       
      var newOrder = ["item3","item2","item1","item4","item5"];//3,2,1,4,5 i 
      var temp = []; 

      for(i=0; i<newOrder.length; i++){ 

       for(j=0; j<elems.length; j++) 
       { 
        if (newOrder[i]===elems[j].id) 
        { 
        temp[i]=elems[j]; 
        i++;//incrementing the outer loop 
        break; 
        } 
        else{ 
         j++;     
        } 
       }    
      } 
      $('#sortable1').append(temp);      
     }); 

    }); 

这里我只得到第一个元素追加到UL（ “＃sortable1”）的新秩序。请检查列表的自定义顺序。我希望新订单中的所有项目都附加到UL。

这里是小提琴http://jsfiddle.net/5aaPU/329/

Answer 1

尝试：

$("#new").on('click',function(){ 

     var elems = $('#sortable1').children('li'); //1,2,3,4,5 j 
     $('#sortable1').html(); 
     var newOrder = ["item3","item2","item1","item4","item5"];//3,2,1,4,5 i 
     var temp = []; 

     for(i=0; i<newOrder.length; i++){ 

      for(j=0; j<elems.length; j++) 
      { 
       if (elems[j].id === newOrder[i]) 
       { 
       temp.push(elems[j]); 
       break; 
       } 

      }    
     } 
     $('#sortable1').append(temp);      
    }); 

的jsfiddle：http://jsfiddle.net/5aaPU/340/