Question

我想要实现的是当重新排列textareas列表时，textareas的名称更新为始终按升序排序。为了证明：

原始

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

小提琴：https://jsfiddle.net/kz4t8ph5/2/

另请参阅下面的赛义夫答案：）

Answer 2

使用sortupdate代替sortchange。在排序期间会触发sortchange，这就是您获得意外数字序列的原因。停止排序时会触发sortupdate。所以你将得到最终的位置和预期的顺序。

$( ".sortable" ).on("sortupdate", function( event, ui )
{
}

jQuery UI onchange每个循环不能按预期工作

2 个答案: