jQuery - 通過更改文本框的值重新排序列表

Question

我想弄清楚如何使用文本框的值重新排列ul。

開始用ul ....

<ul id="ItemList"> 
    <li> <some text> <input id="Text1" type="text" value="1" /></li> 
    <li> <some text> <input id="Text2" type="text" value="2" /></li> 
    <li> <some text> <input id="Text3" type="text" value="3" /></li> 
    <li> <some text> <input id="Text4" type="text" value="4" /></li> 
</ul> 

那麼，如果我的Text4從4值更改爲2名單將重新排序本身而改變text2 & 3值分別3 & 4。

我懷疑我不是第一個必須這樣做，所以如果有指針可用。

我在這裏找不到任何具體的東西，但我可能沒有找到正確的東西。

Answer 1

這裏有一個快速的方法來做到這一點（沒有錯誤檢查）：

$('input').keyup(function() { 
    var start = $(this).index('input'); 
    var target = $(this).val() - 1; 
    if (target < start) $(this).parent().insertBefore($('li').eq($(this).val() - 1)); 
    if (target > start) $(this).parent().insertAfter($('li').eq($(this).val() - 1)); 
}); 

jsFiddle example

需要注意的是要重新編號變更後的輸入，此行添加到末尾的功能$('input').each(function(){$(this).val($(this).index('input')+1)});