使用jQuery更改div中的div ID

Question

I was able to successfully clone and remove certain part of my form thanks to David Carr - Duplicate form sections with jQuery 多亏了David Carr-使用jQuery复制表单部分，我得以成功克隆并删除了表单的某些部分

Now I have been trying to change two div ids ( #ifYes & #ifNo ) which are hidden to provide them with a unique id every time the form is cloned, I have added two line of coding to change the div ids which doesn't really work. 现在，我一直在尝试更改两个div ID（ #ifYes和#ifNo ），它们被hidden以在每次克隆表单时为它们提供唯一的ID，我添加了两行编码来更改div ID，真的有效。

My code is as follows: 我的代码如下：

HTML : HTML ：

<div id="content">
  <button type="button" id="cross" class="buttonImgTop cross"></button>
   <div id="ValuWrapper">
      <div id="ifYes"> .. </div>
      <div id="ifNo">  .. </div>
   </div>
</div>

<button type="button" class="buttonImg" id="repeat"></button>

JavaScript : JavaScript ：

//define template
var template = $('#content:first').clone();


//define counter
var count = 0;

//add new section
$('body').on('click', '#repeat', function() {

//increment
count++;

//remove cross button div
template.clone().find('cross').removeAttr("#cross");

//update id of ifYes & ifNo
template.clone().find('#ifYes').attr("id", "#ifYes"+count);
template.clone().find('#ifNo').attr("id", "#ifNo"+count);

//loop through each input
var inputSection = template.clone().find(':input').each(function(){

    //set id to store the updated section number
    var newId = this.id + count;

    //update id
    this.id = newId;

}).end()

//inject new section with animation
.appendTo('#content').hide()
.appendTo('#content').slideDown(500)
return false;
});

//remove section
$('#content').on('click', '.cross', function() {
//slide up section
$(this).parent().slideUp(500, function(){
    //remove parent element (main section)
    $(this).parent().child().empty();
    return false;
});
return false;
});

Appreciate your assistance. 感谢您的协助。

Answer 1

Here is the fiddle: https://jsfiddle.net/zh7wejzb/ 这是小提琴： https : //jsfiddle.net/zh7wejzb/

Here is the working example. 这是工作示例。 Please have a look: 请看一看：

    <!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="description" content="Fullscreen backgrounds with centered content">
</head>

<body>
    <div id="content">
        <button type="button" class="buttonImgTop cross">Cross</button>
        <div id="ValuWrapper">
            <div id="ifYes" class="yes"> .. </div>
            <div id="ifNo" class="no"> .. </div>
        </div>
    </div>
    <button type="button" class="buttonImg" id="repeat">Repeat</button>
    <script type="text/javascript">
    //define template
    var template = $('#content:first');


    //define counter
    var count = 0;

    //add new section
    $('body').on('click', '#repeat', function() {

        //increment
        count++;

        //remove cross button div
        var clone = template.clone()
            .appendTo('#content').hide()
            .slideDown(500);

        //update id of ifYes & ifNo
        clone.find('.yes').prop("id", "ifYes" + count);
        clone.find('.no').prop("id", "ifNo" + count);

        //loop through each input
        clone.find(':input').each(function() {

            //set id to store the updated section number
            var newId = this.id + count;

            //update id
            this.id = newId;

        }).end()


        return false;
    });

    //remove section
    $('#content').on('click', '.cross', function() {
        //slide up section
        $(this).parent().slideUp(500, function() {
            //remove parent element (main section)
            $(this).empty();
            return false;
        });
        return false;
    });
    </script>
</body>

</html>

Answer 2

<html>
  <head>
    <title>Change Html Div ID Using jQuery</title>
 </head>
 <body>
    <div id="ChangeID"></div>
</html>

<script src="jQuery CDN"></script>
$(document).ready(function(){        
$('#ChangeID').attr('id', 'NewID')      
});
 <script>   

</body>
</html>

Answer 3

I have to do this sort of thing often. 我必须经常做这种事情。 What I do is probably not ideal but it works. 我所做的可能并不理想，但确实可行。 I do something like this... 我做这样的事...

function getRandomInt(000000, 999999) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var uniqueScriptID = “anythingStartingLowercase” + getRandomInt();

and then concatenate the entire script into a variable, but where the ID is written literally in the script, replace it with the uniqueScriptID variable. 然后将整个脚本串联到一个变量中，但是要在脚本中按原义写入ID的地方，请用uniqueScriptID变量替换它。

You can then use that variable to throw out as many of those forms as you like, all with unique ID's. 然后，您可以使用该变量来抛出尽可能多的具有唯一ID的表格。

Hope that helps. 希望能有所帮助。 That code is NOT tested at all. 该代码完全未经测试。

使用jQuery更改div中的div ID

问题描述

3 个解决方案

解决方案1
1 已采纳 2017-08-28 18:56:48

解决方案2
0 2017-08-28 18:14:35

解决方案3
0 2017-08-28 18:20:32

使用jQuery更改div中的div ID

问题描述

3 个解决方案

解决方案1 1 已采纳 2017-08-28 18:56:48

解决方案2 0 2017-08-28 18:14:35

解决方案3 0 2017-08-28 18:20:32

解决方案1
1 已采纳 2017-08-28 18:56:48

解决方案2
0 2017-08-28 18:14:35

解决方案3
0 2017-08-28 18:20:32