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)});