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

Question

我有一个表格，其中有一个DIV部分drag and drop。每个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通话的“更新”部分。

alert如果我在“更新”部分取消注释，function我会得到以下 信息

这很好，但我也有问题是“第一”行不能移动，所以它从第二行开始，所以index需要从“1”开始，而不是“0”。

我想我是其中的一员，只需要最后润色的帮助，因为下面的代码行$('span[name = orderNumber]').text(Newpos);更新了我所有的数字，但这是因为它们都有相同的name，因为这个列表将row用一个 uinque填充每个id（蓝色的数字是原号码）。

标签： javascriptjquery

Answer 1

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

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

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