使用jQuery更改div中的div ID

Question

多虧了David Carr-使用jQuery復制表單部分，我得以成功克隆並刪除了表單的某些部分

現在，我一直在嘗試更改兩個div ID（ #ifYes和#ifNo ），它們被hidden以在每次克隆表單時為它們提供唯一的ID，我添加了兩行編碼來更改div ID，真的有效。

我的代碼如下：

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 ：

//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;
});

感謝您的協助。

Answer 1

這是小提琴： https : //jsfiddle.net/zh7wejzb/

這是工作示例。 請看一看：

    <!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

我必須經常做這種事情。 我所做的可能並不理想，但確實可行。 我做這樣的事...

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

var uniqueScriptID = “anythingStartingLowercase” + getRandomInt();

然后將整個腳本串聯到一個變量中，但是要在腳本中按原義寫入ID的地方，請用uniqueScriptID變量替換它。

然后，您可以使用該變量來拋出盡可能多的具有唯一ID的表格。

希望能有所幫助。 該代碼完全未經測試。

使用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