Change div id within a div using jQuery
Question
I was able to successfully clone and remove certain part of my form thanks to David Carr - Duplicate form sections with 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.
My code is as follows:
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;
});
Appreciate your assistance.
3 answers
solution1
1 ACCPTED 2017-08-28 18:56:48
Here is the fiddle: 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>
solution2
0 2017-08-28 18:14:35
<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>
solution3
0 2017-08-28 18:20:32
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.
You can then use that variable to throw out as many of those forms as you like, all with unique ID's.
Hope that helps. That code is NOT tested at all.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.