javascript - jQuery UI onchange 每个循环未按预期工作

Question

我想要实现的是，当重新排列文本区域列表时，文本区域的名称更新为始终按升序排列。演示:

原创

name      content
value[0]  content0
value[1]  content1
value[2]  content2

重新排序(不一定按照这个顺序，只是一个例子)

name      content
value[0]  content2
value[1]  content0
value[2]  content1

我写的应该循环遍历列表并更新名称属性，但有时它不会，而其他时候它会使名称的顺序非常错误。这是我正在运行的 jQuery:

$(document).ready(function(){
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();
    $( ".sortable" ).on("sortchange", function( event, ui ) {
        var $i = 0;
        $('.sortable > li').each(function(){
            $(this).children('textarea').attr( 'name', 'value[' + $i + ']' );
            $i++;
        });
    });
});

And a fiddle 。不确定我做错了什么。

Answer 1

使用sortstop而不是sortchange:

$(document).ready(function(){
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();
    $( ".sortable" ).on("sortstop", function( event, ui ) {
        var $i = 0;
        $('.sortable > li').each(function(){
            $(this).children('textarea').attr( 'name', 'value[' + $i + ']' );
            $i++;
        });
    });
});

fiddle :https://jsfiddle.net/kz4t8ph5/2/

另请看看下面 Saif 的回答:)