使用jQueryUI删除时更新项目编号

时间:2017-10-30 16:37:54

标签: jquery jquery-ui jquery-ui-sortable

我有这个工作,有点但只在第二次下降时更新数字,而不是第一次。我在这里做错了什么?

基本上尝试更新" span.digit"使用拖放重新排序时。这样,数字会更新以匹配列表中的新位置。我知道我已接近工作 - 只是不确定我做错了什么。任何解释都会非常有用。谢谢!

$("#sortableQb2").droppable({
    drop: function(event, ui) {
        $('#sortableQb2 > li').each(function (i) {
            var humanNum = i + 1;
            $(this).find("span.digit").html(humanNum + '');
        });
    }
});

<ul id="sortableQb2">
    <li>
        <ul>
            <li>
                 <a href="#!" class="btn btn-link"><span class="digit">1</span>Some Item</a>
            </li>
            <li>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                 <a href="#!" class="btn btn-link"><span class="digit">2</span>Some Item</a>
            </li>
            <li>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                 <a href="#!" class="btn btn-link"><span class="digit">3</span>Some Item</a>
            </li>
            <li>
            </li>
        </ul>
    </li>
</ul>

小提琴:https://jsfiddle.net/o6t095h9/2/

1 个答案:

答案 0 :(得分:0)

我明白了......

$( function() {
    $( "#sortableQb2" ).sortable({
        update: function( event, ui ) {
            $('#sortableQb2 > li > ul > li > a > span.digit').each(function (i) {
                var humanNum = i + 1;
                $(this).html(humanNum + '');
            });
        }
    });
});

小提琴:https://jsfiddle.net/o6t095h9/3/