bhapri
Reputation: 37
Dynamically generate inner buttons for outer class buttons using jquery
I would like to generate inners buttons inside a parent button or div element dynamically.I have a sample code where I am able to generate 10 buttons dynamically.
How can I generate set of buttons within in a parent element to reproduce the structure for 10 times dynamically?
How can I replace element which is span object to have another set of buttons?
The first set of scripts generates 10 buttons dynamically. I would like to have similar functionality to generate a feature which I have described to develop child buttons inside parent element.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).on('click', '.btn btn-default', function(){
alert(this.innerHTML);
});
var i=1;
for(;i<=10;i++){
$('<div/>', {
'class':'btn btn-default',
'html':'<span>Element'+i+'</span>'
}).appendTo('body');
}
</script>
<style>
.myClass{
background:#ccc;
margin:10px;
cursor:pointer;
}
</style>
<br/>
<div class="btn btn-default col-md-1 col-sm-1 col-xs-1">
<br />
<div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
<!--<div class="container">-->
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option5" autocomplete="off" onchange="dataSegment(4)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option6" autocomplete="off" onchange="dataSegment(5)">
</label>
</div>
</div>
</div>
</div>
<div class="btn btn-default col-md-1 col-sm-1 col-xs-1">
<br />
<div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
<!--<div class="container">-->
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" autocomplete="off" onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option4" autocomplete="off" onchange="dataSegment(3)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option5" autocomplete="off" onchange="dataSegment(4)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option6" autocomplete="off" onchange="dataSegment(5)">
</label>
</div>
</div>
</div>
</div>
</body>
</html>Upvotes: 0
Views: 154
Answers (2)
Dzak
Reputation: 412
I don't want to edit my answer because its a bit of a different question you asked. so here is the answer for :
hi I want to generate different sets without defining #set0, #set1 and so on. I tried to implement your solution as above mentioned but no luck:( i want html content to be defined only once.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br/>
<div id="areaForSets">
</div>
<script>
$(document).on('click', '.btn btn-default', function(){
alert(this.innerHTML);
});
var numOfSets = 3;
var numOfButtons = 10;
for(var j=0; j < numOfSets ; j++){
// create the set
var setElement = "<div style='border: solid 1px red' id='set" + j +"'>";
// create its content
var i=0;
for(;i < numOfButtons; i++){
var setContent = "<div class='btn btn-default'><span>Element" + (i+1) + "</span></div>";
setElement += setContent;
}
//close set div
setElement += "</div>";
// append to dom
$("#areaForSets").append(setElement + "<br/>");
}
</script>
<style>
.myClass{
background:#ccc;
margin:10px;
cursor:pointer;
}
</style>
</body>
</html>Upvotes: 1
Dzak
Reputation: 412
How can I replace element which is span object to have another set of buttons?
just clear the content and replace in with your new set of buttons:
$("#firstSet").contents().remove();
var i=1;
for(;i<=10;i++){
$('<div/>', {
'class':'btn btn-default',
'html':'<span>Element'+i+'</span>'
}).appendTo('#firstSet');
}
in your case, if I understood your question correctly, it is somthing like this:
please note that you have some ids repeating themselves (#option1, #option2....).
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br/>
<div id="set0" style="border: solid 1px black">
<br />
<div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
<!--<div class="container">-->
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option01" autocomplete="off" onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option02" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option03" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option04" autocomplete="off" onchange="dataSegment(3)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option05" autocomplete="off" onchange="dataSegment(4)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option06" autocomplete="off" onchange="dataSegment(5)">
</label>
</div>
</div>
</div>
</div>
<br/>
<div id="set1" style="border: solid 1px black">
<br />
<div class="w3-display-container col-md-12 col-sm-12 col-xs-12" style="position:relative;top:1px;bottom:0;">
<!--<div class="container">-->
<div class="row">
<div class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option11" autocomplete="off" onchange="dataSegment(0)" checked>
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option12" autocomplete="off" onchange="dataSegment(1)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option13" autocomplete="off" onchange="dataSegment(2)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option14" autocomplete="off" onchange="dataSegment(3)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option15" autocomplete="off" onchange="dataSegment(4)">
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option16" autocomplete="off" onchange="dataSegment(5)">
</label>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', '.btn btn-default', function(){
alert(this.innerHTML);
});
for(var j=0; j<2 ; j++){
$("#set" + j).contents().remove();
var i=1;
for(;i<=10;i++){
$('<div/>', {
'class':'btn btn-default',
'html':'<span>Element'+i+'</span>'
}).appendTo("#set" + j);
}
}
</script>
<style>
.myClass{
background:#ccc;
margin:10px;
cursor:pointer;
}
</style>
</body>
</html>Upvotes: 1
Related Questions
- How can I add a CSS class to the button that is clicked among multiple buttons using jQuery?
- Generating new buttons from one with JavaScript
- How to: Use JQuery to fetch and update ONLY the following classes under a button living in one of those classes
- Assigning classes or ids to button created dynamically using jquery
- Create reusable button css/jquery from list of buttons
- Change class group of buttons
- dynamically generated buttons with javascript
- Re-using existing button code to create many buttons in html?
- html5 + jquery - How to create buttons dynamically
- create attributes of buttons dynamically depending on div class