0

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

我有一个需要克隆的 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 替换所有这些。

所以一开始我会有一个#phoneBookEntries1div，在单击按钮运行该功能后，我有两个#phoneBookEntries2div 等等。

4

6 回答 6

3

$(".phoneBookEntriesContainer")返回具有类的所有 DOM 元素的数组phoneBookEntriesContainer。因此，当您使用 时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，请使用一个变量来跟踪要附加的数字。

在此处查看演示

这是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);

        });

});​
于 2012-05-31T13:47:28.347 回答
2

我建议遍历每个.phoneBookEntriesContainer：

$(".phoneBookEntriesContainer").each (function (i, el) {
    el.attr('id', ('phoneBookEntries' + (i+1)));
});
于 2012-05-31T13:48:54.913 回答
0

您的代码似乎有点混乱，所以我在这里创建了一个非常详细的版本：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;}
于 2012-05-31T14:45:46.243 回答
0 
<div class="content"></div>

javascript：

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

它将在 .content div 中添加您的条目

于 2012-05-31T14:05:14.563 回答
0

您可以使用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 这里

我希望这有帮助！

于 2012-05-31T13:59:42.293 回答
0 
// 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");
});
于 2012-05-31T14:01:32.037 回答