Question

我目前有两个点击功能..

创建“父母”的克隆。具有唯一ID的div
创建＆＃39;孩子的克隆。具有唯一ID的div

我的问题是我无法让每个父母重置子ID ID，如下所示。

我明白了......

<div class="parent" id="a1">
  <div id="child-a1-1"></div>
  <div id="child-a1-2"></div>
  <div id="child-a1-3"></div>
</div>

<div class="parent" id="a2">
  <div id="child-a2-4"></div>
  <div id="child-a2-5"></div>
  <div id="child-a2-6"></div>
</div>

而不是......

<div class="parent" id="a1">
  <div id="child-a1-1"></div>
  <div id="child-a1-2"></div>
  <div id="child-a1-3"></div>
</div>

<div class="parent" id="a2">
  <div id="child-a2-1"></div>
  <div id="child-a2-2"></div>
  <div id="child-a2-3"></div>
</div>

我的代码

    var newchildId = 1;
    jQuery('.parent').delegate('.add-child', 'click', function() {
        var parentId = $(this).closest('.parent').attr('id');
        var firstChild = 'child-' + parentid + '-1';
        var newChild = 'child-' + parentid + '-' + newchildId;
        var copy = $("#" + firstChild).clone(true);
        copy.attr('id', newChild );
        $(this).closest('.parent').append(copy);
         newchildId++;
    });

Answer 1

我会重构代码（稍微是HTML）来计算给定父级下的实际子级而不是使用全局计数器，因为全局计数器不可能为每个单独的层次结构保留单独的计数：

jQuery(".parent").on("click", ".add-child", function() {
    var parent = $(this).closest('.parent');
    var childs = parent.find(".child");
    var clone = childs.eq(0).clone(true);
    var newID = "child-" + parent.attr("id") + "-" + (childs.length + 1);
    // this sets the text to match the ID just for clarity in the demo
    clone.attr("id", newID).html(newID).appendTo(parent);
});

使用稍加修改的HTML的工作演示：http://jsfiddle.net/jfriend00/j9PT7/

仅供参考，我切换到.on()这是更现代的委托事件处理程序方式（假设您使用的是jQuery 1.7 +）。

仅供参考，您可以在每个父级使用.data("counter")时保留每个级别的计数器，因为您在该父级下添加了每个子级，但是当您可以看到有多少子项时，我认为没有理由单独管理计数器实际上是在DOM本身，并以此为基础。

仅供参考，在正确使用选择器的情况下，很少需要在每个DOM元素上实际具有单调索引ID，因此这里真正的问题可能是您尝试这样做的原因以及您可以采用哪种更好的技术使用不需要这个特殊管理的id值。

重置唯一ID计数

1 个答案: