I was making a vanilla javascript bar graph where I made the bar inside the li tag. In the code below, i use the attribute within the li tag to set the height of the bar, but when I try to select the bar from within the li tag. I am unable to do so.
<ul class="GraphWrapper">
<li bar-height="100">
<div class="graph-bar bar"></div>
MON
</li>
<li bar-height="190">
<div class="graph-bar bar"></div>
TUES
</li>
<li bar-height="260">
<div class="graph-bar bar"></div>
WED
</li>
<li bar-height="180">
<div class="graph-bar bar bar-active"></div>
THURS
</li>
<li bar-height="220">
<div class="graph-bar bar"></div>
FRI
</li>
<li bar-height="300">
<div class="graph-bar bar"></div>
SAT
</li>
<li bar-height="50">
<div class="graph-bar bar"></div>
SUN
</li>
</ul>
//JAVASCRIPT
var children=$('.GraphWrapper').children();
for(var i=0;i<children.length;i++){
let hgt = children[i].getAttribute('bar-height');
bar = children[i] > $('.bar');
bar.css('height',hgt+'px');
}
Here is what you need:
var children = $('.GraphWrapper').children();
for (var i = 0; i < children.length; i++) {
let kid=$(children[i]);
let hgt=kid.attr('bar-height');
let bar=kid.find(".bar");
bar.css('height', hgt + 'px');
}
Because the children() function return a list of DOM object,
so you need to convert the children[i] to jQuery object, and then use the find method to find all divs in the li element, finally, change the height of the div as you want.
You can use .each() method in jQuery and .forEach() method in JavaScript. I putted JavaScript snippet for this also. Check blow snippet I
Pure JavaScript Code:
[...document.querySelectorAll('.GraphWrapper li')].forEach((el)=>{
el.firstElementChild.style.height = el.getAttribute('bar-height')+'px'
});
hope this will help you a lot.
Helpful Links:
.each() Method
https://api.jquery.com/each/
.forEach() Method
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
$('.GraphWrapper li').each((i,elem)=>{
let ht = $(elem).attr('bar-height');
$(elem).find('.graph-bar').css('height', ht+'px')
});.GraphWrapper{
width: 100%;
max-width: 360px;
border: 1px solid #eee;
display: flex;
justify-content: center;
align-items: baseline;
list-style: none;
padding: 10px 5px;
}
.GraphWrapper li{
width: 40px;
font-size: 12px;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
.graph-bar{
background-color: #ccc;
width: 100%;
height: 0;
margin-bottom: 5px;
transition: 1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="GraphWrapper">
<li bar-height="100">
<div class="graph-bar bar"></div>
MON
</li>
<li bar-height="190">
<div class="graph-bar bar"></div>
TUES
</li>
<li bar-height="260">
<div class="graph-bar bar"></div>
WED
</li>
<li bar-height="180">
<div class="graph-bar bar bar-active"></div>
THURS
</li>
<li bar-height="220">
<div class="graph-bar bar"></div>
FRI
</li>
<li bar-height="300">
<div class="graph-bar bar"></div>
SAT
</li>
<li bar-height="50">
<div class="graph-bar bar"></div>
SUN
</li>
</ul>