Add dynamic values for ID, href and aria-controls using Jquery
Question
I want to add the dynamic values for the attributes(href, id, aria-controls), so that i can toggle down the text in multiple places for a single page. Just for your reference i have added "href="#0_read_more", aria-controls="0_read_more", id="0_read_more" in three places in the provided sample code. As well i have increment the values for other two div sections like given in the sample html code. Kindly help me out on this..
Thanks in advance.
<div class="image-text"> <a href="#0_read_more" data-toggle="collapse" aria-expanded="false" aria-controls="0_read_more" class="collapsed"> Read More</a> <div id="0_read_more" class="collapse" aria-expanded="false" style="height: 0px;"><div> </div> <div class="image-text"> <a href="#1_read_more" data-toggle="collapse" aria-expanded="false" aria-controls="1_read_more" class="collapsed"> Read More</a> <div id="1_read_more" class="collapse" aria-expanded="false" style="height: 0px;"><div> </div> <div class="image-text"> <a href="#2_read_more" data-toggle="collapse" aria-expanded="false" aria-controls="2_read_more" class="collapsed"> Read More</a> <div id="2_read_more" class="collapse" aria-expanded="false" style="height: 0px;"><div> </div>
3 answers
solution1
2 2017-11-14 10:55:27
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(i=0;i<3;i++)
{$("#mydiv").append("<div class='image-text'><a href='#"+i+"_read_more' data-toggle='collapse' aria-expanded='false' aria-controls='"+i+"_read_more' class='collapsed'>Read More</a><div id='"+i+"_read_more' class='collapse' aria-expanded='false' style='height: 0px;'><div></div>");
}
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
solution2
0 2017-11-14 10:34:40
You can set attribute for any DOM element using Jquery as follows,
<script>
function setAttributesDynamically(){
$("SELECTOR").attr("href", "YOUR_URL"); // selector may be Id, class, tagname etc.
$("SELECTOR").attr("id", "YOUR_ID");
$("SELECTOR").addClass("CLASS_NAME");
}
</script>
Call setAttributesDynamically() wherever you want.
solution3
0 ACCPTED 2017-11-14 10:47:09
try this
$(document).ready(function(){ $('.collapsed').each(function(i){ var a = '#'+ (i++)+'_read_more'; $(this).attr('href',a); }); $('.collapsed').each(function(i){ var b = (i++)+'_read_more' ; $(this).attr('aria-controls',b); }); $('.collapse').each(function(i){ var c = (i++)+'_read_more' ; $(this).attr('id',c); }); });
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="image-text"> <a data-toggle="collapse" aria-expanded="false" class="collapsed"> Read More</a> <div class="collapse" aria-expanded="false" style="height: 0px;"></div> </div> <div class="image-text"> <a data-toggle="collapse" aria-expanded="false" class="collapsed"> Read More</a> <div class="collapse" aria-expanded="false" style="height: 0px;"></div> </div> <div class="image-text"> <a data-toggle="collapse" aria-expanded="false" class="collapsed"> Read More</a> <div class="collapse" aria-expanded="false" style="height: 0px;"></div> </div>
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.