javascript - 使用 jQuery 或 JavaScript 更改时更新/更改 DIV 中的订单号

Question

我有一个表单，其中有一个 DIV 部分，该部分是拖放。每个 DIV 都在一个 for 循环中(一旦后端 DEV 对其进行排序，现在它只是硬编码)。

HTML

<div class="row sortableRows">
    <div name="orderNumber" class="col-xs-1 col-md-1">1</div>
    <div name="startTime" class="col-xs-2 col-md-1">08:00</div>
    <div name="endTime" class="col-xs-2 col-md-1">17:00</div>
    <div name="weekDays" class="col-xs-2 col-md-1">Mon - Fri</div>
    <div name="monthDays" class="col-xs-2 col-md-1">01 - 20</div>
    <div name="months" class="col-xs-2 col-md-1">Jan - Dec</div>
    <div name="goTo" class="col-xs-2 col-md-1">Working hours</div>
</div>

JQuery

var sortableRows = function () {
    if (allowedSort) {
        $('#sortableRows').sortable({
            disabled: false,
            update: function (event, ui) {
            //     var Newpos = ui.item.index();
            //     alert("You moved item to position " + Newpos);
            //     $('span[name = orderNumber]').text(Newpos);
                }
            });
        } else {
            // Stops drag & drop when clicking 'Add' button
            $('#sortableRows').sortable({
                disabled: true,
            });
        }
    }

图片

所以我要举个例子，如果位置 1 移动到 3，则如下

位置 2 变为 1位置 3 变为 2位置 1 变为 3等等等等

但是我一辈子都无法在 JQuery 中弄清楚它。我知道这段代码需要放入我的 function 调用的“Update”部分。

如果我在函数的“更新”部分取消注释警报，我会得到以下结果:

这很好，但我也遇到的问题是“第一”行无法移动，因此它是从病房的第二行开始的，因此索引需要从“1”开始，而不是从“1”开始也有“0”。

以下代码行$('span[name = orderNumber]').text(Newpos);更新了我的所有号码，但这是因为它们都有相同的name 因为此列表将使用一个独特的 id 填充每个行(蓝色数字是原始数字)。

Answer 1

要在移动后重新对行进行编号，我建议您使用 .each() 循环:

$('span[name = orderNumber]').each(function(index){
  $(this).text(index+1);  // Loop index is used
});

因此循环索引用于对所有行重新编号。这也是从零开始的......但请注意 +1。