Question

假设我有以下可排序对象：

<ul class="photos ui-sortable">
    <li class="photo" data-id="1"></li>
    <li class="photo" data-id="2"></li>
    <li class="photo" data-id="3"></li>
    <li class="photo" data-id="4"></li>
    <li class="photo" data-id="5"></li>
    <li class="photo" data-id="6"></li>
</ul>

排序后，所有项目的data-id属性需要使用新位置进行更新。

我试过了：

$('.photos').sortable({
    stop: function(event, ui){
        $(ui.item).attr('data-id', ui.item.index()+1);
    }
});

但它只更新已移动项目的数据ID，而不更新其他项目。我怎么能这样做？

Answer 1

使用update事件，在其中只圈出每个.photo并根据当前索引设置data-id：

$('.photos').sortable({
    update: function(event, ui) {
        $('.photo').each(function(i) { 
           $(this).data('id', i + 1); // updates the data object
           $(this).attr('data-id', i + 1); // updates the attribute
        });
    }
});

Here's a fiddle

Answer 2

您正在使用停止方法ui，该方法会在移动时返回当前项目。所以基本上你必须遍历所有项目并手动输入数据属性值

$('.photos').sortable({
    stop: function(event, ui){
        $(".ui-sortable li").each(function(i, el){
               $(el).prop('data-id',$(el).index()+1);
        });
    }
});

jQuery UI Sortable - 更新项数据id属性

2 个答案:

Here's a fiddle

这是Working Fiddle