为一系列克隆的复选框字段提供唯一名称的困难 - javascript答案

【问题标题】：Difficulties giving a unique name to a serie of cloned checkboxes field - javascript为一系列克隆的复选框字段提供唯一名称的困难 - javascript
【发布时间】：2014-03-11 00:19:54
【问题描述】：

我尝试为克隆的复选框设置唯一名称，而不是获取，让我们说：

 Origin_1, Origin_2, Origin_3, for cloned 1, 2, 3 of the same element,

我明白了：

Origin_1, Orignin_11, Origin_111

我了解这个问题：克隆使用过去的克隆作为原始名称。我不知道应该采取什么方法。要么找到一种使用原始名称的方法，要么将前一个克隆的名称修剪一个字符，并确保计数器不会再次从头开始。您的提示将不胜感激。

这里是javascript代码：

$(window).load(function() { 
    var bindFunction = $('#quickmenuall input:checkbox').change(function(){ 
        var uniqueId = 1;
        var currentName = $(this).attr('name'); 
        newName = currentName + (uniqueId++);
        if($(this).is(':checked')){
            var clonedClient = $(this).parent().parent().parent().parent().parent().clone(true) 
            var ori = $(this).parent().parent().parent().parent().parent() 
            clonedClient.insertBefore(ori)
            $(this).attr('name', newName)
            var clonedClient = $(this);
            $(this).prop('checked', false)
        } else {
            var clonedClient = $(this);
            clonedClient.parent().parent().parent().parent().parent().remove() 
            checkbox.bind("change", bindFunction);
            bindFunction();
        }
    });
});

这是一个 jsfiddle：http://jsfiddle.net/Sergelie/ULywc/

【问题讨论】：

parent().parent().parent().parent().parent()你没有这样做
你能提供一个小提琴吗？刚刚注意到，你能把var uniqueId = 1; 放在change 事件之外，这样它就不会每次都被覆盖了吗？
避免使用链式 parent() 方法 - 尝试使用 closest() 更多信息：api.jquery.com/closest
您可以设置模板并从中创建新项目 - 请参阅 stackoverflow.com/questions/13487647/…
@Varinder 这里是 jsfiddle（我摆脱了几个 parent() ：jsfiddle.net/Sergelie/ULywc

标签： javascript clone uniqueidentifier unique-id

【解决方案1】：

部分问题是您的 uniqueId 在更改函数的范围内声明，因此始终以 1 开头。此外，您使用的是后增量运算符 (uniqueId++)，它在分配后将 1 更改为 2到新名称。这就是为什么你会得到“1”、“11”、“111”等。尝试将 uniqueId 移动到 window.load 中（例如）。

试试这个：

$(window).load(function() { 
        var uniqueId = 1;

    var bindFunction = $('#quickmenuall input:checkbox').change(function(){ 
        var currentName = $(this).attr('name'); 
        newName = currentName + (uniqueId++);
        if($(this).is(':checked')){
            var clonedClient = $(this).parent().parent().parent().parent().parent().clone(true) 
            var ori = $(this).parent().parent().parent().parent().parent() 
            clonedClient.insertBefore(ori)
            $(this).attr('name', newName)
            var clonedClient = $(this);
            $(this).prop('checked', false)
        } else {
            var clonedClient = $(this);
            clonedClient.parent().parent().parent().parent().parent().remove() 
            checkbox.bind("change", bindFunction);
            bindFunction();
        }
    });
});

或者将它与同样建议的正则表达式方法结合起来，或者简单地为你的复选框保存一个“前缀”ID。

var prefix = 'checkbox_';
var uniqueId = 1;
var id1 = prefix + (uniqueId++).toString(); // checkbox_1
var id2 = prefix + (uniqueId++).toString(); // checkbox_2
var id3 = prefix + (uniqueId++).toString(); // checkbox_3

【讨论】：

【解决方案2】：

currentName 是一个 String 并且您正在将一个 Integer 连接到它。

newName = "1"+1; // "11"
newName = 1+1; // 2

要解决您的直接问题，请使用正则表达式，匹配 currentName 的数字/数字部分并将其解析为整数，然后再添加您的 uniqueId。

// Regex goes something like
// starts with a non-digit character 1 or more times 
// followed by and ending with zero or more digits
var nameParts = currentName.match(/^([^0-9]+)(\d*)$/);
newName = nameParts[1] + (parseInt(nameParts[2]||0) + uniqueId++);

FIDDLE Fork

更新

Check out this FIDDLE

阅读下面的 cmets 以获得解释。我相信你不再需要 uniqueId。

input[name^="F_1_"] 获取所有克隆（以 F_1_ 开头）input[name="F_1"]，获取原版

var currentName = $(this).attr('name'); 
// We are again matching the core part of the clone element to get the itemFamily
var nameParts = currentName.match(/^([^0-9]+(_[0-9]+))(_[0-9]+)?$/);
// Then we use the attribute starts with selector and attribute equals to selector
// to get the original and all clones of with the core itemFamily name part
// the length attribute will be your next number in the item family clone.
var itemFamilyCount = $('input[name^="'+nameParts[1]+'_"], input[name="'+nameParts[1]+'"]').length;
newName = nameParts[1] + '_' + itemFamilyCount;

【讨论】：

谢谢@cbayram，我们到了！虽然，我没有提到（我没有意识到，那时它会变得很重要）我的名字是以这种方式动态创建的：F_1、F_2、F_3、F_4（可以去 F_100dreds，所以在克隆时，如果 F_1 克隆被命名为F_2，我对真正的F_2有问题。所以，如果将结果添加到原始名称而不进行任何中继，您的解决方案将是完美的。（我不是程序员，但我可以理解和适应）！
你的小提琴适应了真实的“名字”情况。
@user3371049，我想我明白了。如果我克隆F_1两次，我可以有2个F_12还是应该是F_12和F_13？
最好的解决方案是保持原名的完整性，作为克隆名的基础，并在其上添加一个递增的数字，用于克隆2、3、4等。
@user3371049，但是如果已经有 F_11（原始），如果您创建 F_1 的克隆，这也会是 F_11。 F_1_1, F_1_2, F_1_3, ... 可以解决这个冲突吗？

【解决方案3】：

您需要使用 regex 或 substring() 获取原始名称

我已经设法使它与子字符串一起使用，因为我知道我正在构建我的克隆，例如 One_1 One_2 等... 但是，最好使用正则表达式，例如@cbayram 的另一个答案。当我有时间时，我将构建一个正则表达式并更新小提琴。

var lastIndexOf_ = oldName.lastIndexOf('_');
// we build the clones with and underscore + number. get substring from the beginning of     the oldName until the "_"
if (lastIndexOf_ != -1)
    oldName = oldName.substring(0,lastIndexOf_);
// else just use the oldName
var newName = oldName + '_' + i++; // build new name and increment counter.

请检查这个 jsfiddle http://jsfiddle.net/houssamk/Dzr58/39/

我还重新设计并清理了事件处理程序的绑定方式。我使用 $.on() 而不是 bind()。 $.on() 更好，因为它会在创建新克隆时动态附加事件处理程序。

希望对你有帮助

【讨论】：