JQuery的.change（）

Question

我使用jQuery UI可排序的，我需要跟蹤的<li>這裏當前位置陣列。每（）函數中的功能代碼

$(document).ready(function() { 
    $('#sortable').sortable({ 
     update: function(event, ui) { 

      $('#sortable').children().each(function(i) { 
       var id = $(this).attr('data-post-id') 
        ,order = $(this).index() + 1; 

       $('#console').val($('#console').val() + '' + id + '' + ','); 

      }); 

     } 
    }); 
}); 

&這裏是HTML

<ul id="sortable"> 
    <li data-post-id="1">Post 1</li> 
    <li data-post-id="2">Post 2</li> 
    <li data-post-id="3">Post 3</li> 
    <li data-post-id="4">Post 4</li> 
    <li data-post-id="5">Post 5</li> 
    <li data-post-id="6">Post 6</li> 
    <li data-post-id="7">Post 7</li> 
</ul> 

<input id="console" type="text" /> 

在排序時，我想要在輸入區域內打印<li>的當前位置數組。

此代碼工作正常，除了：

在。每個（）排序，陣列是輸入區域之內的附加。我想要的是替換以前的陣列與新陣列

這裏是Fiddle，這將給你一個我在說什麼的想法。

我試圖包裝.change（）函數，但我沒有得到正確的。

任何幫助，將不勝感激！

感謝

Answer 1

而是附加的，按ID到一個數組外每（）

$(document).ready(function() { 
    $('#sortable').sortable({ 
     update: function(event, ui) { 
      var foo = []; 
      $('#sortable').children().each(function(i) { 
       var id = $(this).attr('data-post-id') 
        ,order = $(this).index() + 1; 
       foo.push(id); 
      }); 
      $('#console').val(foo); 
     } 
    }); 
}); 

Answer 2

$('#sortable').sortable({ 
    update: function(event, ui) { 
      $('#console').val(""); 
      $('#sortable').children().each(function(i) { 
      var id = $(this).attr('data-post-id'),order = $(this).index() + 1;     
      $('#console').val($('#console').val() + '' + id + '' + ',');    
      });   
    }  
}); 

通過重置#console的價值，你通過排序孩子itterate前只會有成爲當前的排序。