Estaba haciendo un gráfico de barras javascript vainilla donde hice la barra dentro de la etiqueta li. En el siguiente código, uso el atributo dentro de la etiqueta li para establecer la altura de la barra, pero cuando trato de seleccionar la barra desde dentro de la etiqueta li. No puedo hacerlo.
<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'); }Esto es lo que necesita:
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'); } Debido a que la función children () devuelve una lista de objetos DOM, debe convertir los children[i] en objetos jQuery, y luego usar el método de búsqueda para encontrar todos los divs en el elemento li , finalmente, cambie la altura del div como quieras
Puede usar el método .each() en jQuery y el método .forEach() en JavaScript. También puse un fragmento de JavaScript para esto. Compruebe el fragmento de golpe I
Pure JavaScript Code: [...document.querySelectorAll('.GraphWrapper li')].forEach((el)=>{ el.firstElementChild.style.height = el.getAttribute('bar-height')+'px' });Espero que esto te ayude mucho.
Enlaces Útiles:
Método .each()
https://api.jquery.com/each/
Método .forEach()
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>