Question

我有一个jQuery脚本可以克隆可排序的输入字段行。该脚本是可配置的，您可以在开头（insertBefore）或结尾（insertAfter）插入新的克隆行。在最后插入新克隆没有问题，并按预期工作。但是在开头插入会引起数字排序的问题。

两个例子：

假设您在数据库中保存了4行。当你克隆最后一行并在第一行之前插入它时，数字会增加到5.但是之后的每个克隆仍然克隆到5，因为第4行仍在使用。
将其切换到克隆第一行的位置并将其插入第一行之前...递增从2,3开始，依此类推，最终将在保存时替换以前保存的行。

我有什么想法可以让insertBefore正确递增？每次触发克隆点击事件时，是否可以重新排序所有行？我不确定这种解决方案可以起作用。

这是我用于此的代码：

$('.add-row').on('click', function(event) {
    function incrementProp(index, prop) {
        return prop.replace(/(\d+)/, function(fullMatch, n) {
            return Number(n) + 1;
        });
    }

    var clone_row,
        insert_location,
        clone_var = $(this).parents('.sortable');

    if (clone_var.is('.before')) {
        clone_row = clone_var.find('.sort-group .row:last');
        insert_location = clone_var.find('.sort-group .row:first');
        insert = 'insertBefore';
    } else {
        clone_row = clone_var.find('.sort-group .row:last');
        insert_location = clone_var.find('.sort-group .row:last');
        insert = 'insertAfter';
    }

    clone_row.clone(true)[insert](insert_location)
        .addClass('add').removeClass('first')
        .find('input[type=text], input[type=hidden], textarea, select').val('').attr('name', incrementProp).end()
        .find('input, textarea, select').attr('id', incrementProp);

    return false;
});

我们将非常感谢您提供的任何帮助！

更新：添加了一个基本的小提琴。 http://jsfiddle.net/85FY6/1/

Answer 1

如果您只需要id值是唯一的，并且不关心id值的顺序是否与行的顺序匹配，您可以使用行数来获取下一个id值：

$('.add-row').on('click', function (event) {

    var newIndex = $('.sort-group').find('.row').length + 1;

    function incrementProp(index, prop) {
        return prop.replace(/(\d+)/, newIndex);
    }

    ...

jsfiddle

您可能希望重命名incrementProp()，因为它的名称不再合适。

克隆时增加和重新排序输入字段ID

1 个答案: