Javascript 克隆div并替换id'；s_Javascript_Jquery

Javascript 克隆div并替换id'；s

javascript jquery

Javascript 克隆div并替换id'；s,javascript,jquery,Javascript,Jquery,希望这不是一个重复的问题，因为我找不到答案我有一个div需要克隆 <div class="phoneBookEntriesContainer"> content here </div> 满足于此之后我必须添加一个ID…不要问：p <script type="text/javascript"> var i = 1; $(".phoneBookEntriesContainer").attr("id","phoneBookEntries" + i)

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

我有一个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>


var i=1；
$（“.phoneBookEntriesContainer”）.attr（“id”，“phoneBookEntries”+i）；
var doSomething=函数（）{
$（“.phoneBookEntriesContainer”）.attr（“id”，“phoneBookEntries”+i）；
$（“#phoneBookEntries”+i）.clone（）.insertAfter（“#phoneBookEntries”+i）；
i++；
};

上面的代码可以工作，但是它没有给我的divs唯一的id，而是用相同的id替换了它们

因此，在开始时，我会有一个

#phoneBookEntries1

div，单击按钮运行函数后，我会有两个

#phoneBookEntries2

div等。

$（“.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，请使用变量跟踪要追加的数字

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

        });

});

$（“.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，请使用变量跟踪要追加的数字

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

        });

});

我建议在每个上循环。phoneBookEntriesContainer
：
$(".phoneBookEntriesContainer").each (function (i, el) {
    el.attr('id', ('phoneBookEntries' + (i+1)));
});

我建议在每个上循环。phoneBookEntriesContainer
：
$(".phoneBookEntriesContainer").each (function (i, el) {
    el.attr('id', ('phoneBookEntries' + (i+1)));
});

您可以使用该属性获取元素总数，并将其附加到ID前缀中，如下所示：
HTML
<div class="phoneBookEntriesContainer">
    content here
</div>

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


我希望这有帮助
 您可以使用该属性获取元素总数，并将其附加到ID前缀中，如下所示：
// 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");
});

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

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


我希望这有帮助
 //设置第一个容器id
// 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");
});

$（.phoneBookEntriesContainer”）.attr（“id”，“phoneBookEntries1”）；
//点击按钮
$（“#我的按钮”）。单击（函数（）{
//将新ID计算为phoneBookEntries计数+1
var newID=“phoneBookEntries”+（$（$div[id^='phoneBookEntries']）.size（）+1）；
//在最后一个div之后插入新div
$（“”）.insertAfter（$（$div[id^='phoneBookEntries']）.last（）；
//将该类添加到没有该类的div中
$（“div[id^='phoneBookEntries']）。addClass（“phoneBookEntriesContainer”）；
});
//设置第一个容器id
$（.phoneBookEntriesContainer”）.attr（“id”，“phoneBookEntries1”）；
//点击按钮
$（“#我的按钮”）。单击（函数（）{
//将新ID计算为phoneBookEntries计数+1
var newID=“phoneBookEntries”+（$（$div[id^='phoneBookEntries']）.size（）+1）；
//在最后一个div之后插入新div
$（“”）.insertAfter（$（$div[id^='phoneBookEntries']）.last（）；
//将该类添加到没有该类的div中
$（“div[id^='phoneBookEntries']）。addClass（“phoneBookEntriesContainer”）；
});


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

var myfunition=function（）{
变量id=''+$（'.content'）.children（）.length；
$（'.content'）。追加（“”）；
}

它将使用


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

var myfunition=function（）{
变量id=''+$（'.content'）.children（）.length；
$（'.content'）。追加（“”）；
}

它会将您的条目添加到.content div中，
您的代码似乎有点混乱，因此我在这里创建了一个非常详细的版本：
单击工作示例中的内容，它会添加另一个内容（我认为您需要修改）
首先，我给你的第一个Id属性0；
我在其中添加了一些类add/remove，以便您可以看到发生了什么。
我添加文本也是为了同样的目的，以反映添加的元素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;}

您的代码似乎有点混乱，因此我在这里创建了一个非常详细的版本：
单击工作示例中的内容，它会添加另一个内容（我认为您需要修改）
首先，我给你的第一个Id属性0；
我在其中添加了一些类add/remove，以便您可以看到发生了什么。
我添加文本也是为了同样的目的，以反映添加的元素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应该递增。我对jquery和javascript非常陌生，盯着这个白色屏幕已经很头疼了。lol。或者使用ID选择器，因为原始的
（要克隆的）在函数执行之前已经有了一个。谢谢！稍微调整一下，效果很好！非常感谢您的快速回复！很抱歉问你。我的函数应该是什么样的？我需要在每次单击按钮时克隆div，并且id应该递增。我对jquery和javascript非常陌生，盯着这个白色屏幕已经很头疼了。lol。或者使用ID选择器，因为原始的
（要克隆的）在函数执行之前已经有了一个。谢谢！稍微调整一下，效果很好！非常感谢您的快速回复！你为什么要登广告