Question

希望这不是一个重复的问题，因为我找不到答案。

我有一个我需要克隆的div。

<div class="phoneBookEntriesContainer">
    content here
</div>

之后我必须添加ID ...不要问：P。

<script type="text/javascript">
var i = 1;
$(".phoneBookEntriesContainer").attr("id","phoneBookEntries" + i);
var doSomething = function(){

    $(".phoneBookEntriesContainer").attr("id","phoneBookEntries" + i);
    $("#phoneBookEntries" + i).clone().insertAfter("#phoneBookEntries" + i);

    i ++;
};
</script>

上面的代码有点起作用，但它不是给我的div唯一id，而是用相同的id替换所有id。

所以一开始我会有一个#phoneBookEntries1 div，点击按钮运行该功能后我有两个#phoneBookEntries2 div等等。

Answer 1

$(".phoneBookEntriesContainer")返回包含类phoneBookEntriesContainer的所有DOM元素的数组。因此，当您使用attr时，它会替换所有这些元素上的id。如果只想在特定元素上替换它，则需要指定哪一个。

您可以通过以下方式实现这一目标：

//picks the last instance
$(".phoneBookEntriesContainer").last().attr("id","phoneBookEntries" + i);

//picks the last instance
$(".phoneBookEntriesContainer").first().attr("id","phoneBookEntries" + i);

//picks the 3rd instance
//.eq() is 0-indexed
$(".phoneBookEntriesContainer").eq(2).attr("id","phoneBookEntries" + i);

为了达到你想要的效果，你应该使用jQuery的.each()方法遍历所有元素。有关详细信息，请参阅Hidde的答案。

如果你想克隆你的div并每次给它一个新的ID，使用一个变量来跟踪要追加的数字。

<强> See the demo here

这是Jquery代码

$(document).ready(function(){

        var currentID = 1;

        $('button').on('click',function(){
            currentID++;
            $('.foobar')
                .first()
                .clone()
                .appendTo('#wrapper')
                .attr('id','span' + currentID)
                .text('This has an ID of ' + currentID);

        });

});

Answer 2

我建议循环每个.phoneBookEntriesContainer：

$(".phoneBookEntriesContainer").each (function (i, el) {
    el.attr('id', ('phoneBookEntries' + (i+1)));
});

Answer 3

您可以使用length属性获取元素总数，并将其附加到您的ID前缀，如下所示：

<强> HTML

<div class="phoneBookEntriesContainer">
    content here
</div>

<a href="#" class="cloneDiv">Click to Clone</a>

<强>的JavaScript

// Bind to Clone Button //
$('.cloneDiv').bind('click', function(e){  

    // Prevent Default Action //
    e.preventDefault();

    // Create Clone //
    var $clone = $('.phoneBookEntriesContainer').filter(':last').clone();

    // Create Unique ID using Length //
    var cloneID = 'phoneBookEntries'+$('.phoneBookEntriesContainer').length;

    // Append to Body and Add Unique ID //
    $clone.attr('id', cloneID);
    $('.phoneBookEntriesContainer').filter(':last').after($clone);
});

JSFiddle Here

我希望这有帮助！

Answer 4

// set first container id
$(".phoneBookEntriesContainer").attr("id","phoneBookEntries1");

// on button click
$("#mybutton").click(function(){
    // calculate the new ID as phoneBookEntries count + 1
    var newID = "phoneBookEntries" + ($("div[id^='phoneBookEntries']").size() + 1);
    // insert the new div after the last one
    $("<div id='"+newID+"'></div>").insertAfter($("div[id^='phoneBookEntries']").last());
    // add the class to the divs which doesn't have it
    $("div[id^='phoneBookEntries']").addClass("phoneBookEntriesContainer");
});

Answer 5

<div class="content"></div>

javascript：

var myFuntion = function(){
   var id = '' + $('.content').children().length;
   $('.content').append("<div class='phoneBookEntriesContainer' id='"+ id +"'></div>");
}

它将使用

在.content div中添加您的条目

Answer 6

您的代码似乎有点令人困惑所以我在这里创建了一个非常详细的版本：http://jsfiddle.net/SY3aA/2/

单击工作示例中的内容，然后添加另一个（您将要修改我认为的那个）

首先，我给你的第一个Id属性为0; 我把一些类添加/删除，这样你就可以看到发生了什么。我为了同样的目的添加了文本以反映添加的元素id。

var i = 1;
$(".phoneBookEntriesContainer").attr("id", "phoneBookEntries0");

var doSomething = function() {
    var myclone = $(".phoneBookEntriesContainer").eq(0).clone();
    $(".phoneBookEntriesContainer").removeClass("lastAdd imprev");

    var myentry = 'phoneBookEntries' + i;
    var myPrevEntry = '#phoneBookEntries' + (i - 1);
    var prev = $(myPrevEntry);
    prev.addClass('imprev');
    myclone.attr('id', myentry).insertAfter(prev);
    $('#' + myentry).text($('#' + myentry).text() + myentry);
    //this toggle seemed confusing so I changed it
    $('#' + myentry).addClass("lastAdd");

    i++;
}

$(document).on("click", '.phoneBookEntriesContainer', function() {
    $(".phoneBookEntriesContainer").removeClass("mydiv");
    $(this).addClass('mydiv');
    doSomething();
});

使用这个CSS：

.mydiv{border:solid 1px lime;}
.lastAdd{background-color:aqua;}
.imprev{border:solid blue 2px;}

克隆div并替换id

6 个答案: