javascript - 查找父元素数据值并显示

Question

我制作了一个简单的水平图表，并在 html 中使用 jQuery 和数据值来设置每个条形图的宽度，这部分工作正常。我一直试图在每个图形条内显示数据值。下面的 jQuery 代码显示最后一个图形条的数据值，它在每个图形条中都是 22%。如何正确显示每个图形条的数据值？

HTML代码

<div class="graph-bar-bg">
  <span class="graph-bar" data-value="78"><i></i></span>
</div> 

jQuery 代码

    $(document).ready(function() {
        $('.graph-bar').each(function() {
          var barWidth = $(this).data('value');
          $(this).css("width", barWidth + "%");
          $('.graph-bar i').each(function() {
             $(this).text(barWidth);
          });
        });
   });

感谢您的帮助。

Answer 1

$(document).ready(function() {
     $('.graph-bar').each(function() {    
          var barWidth = $(this).data('value');    
          $(this).css("width", barWidth + "%");
          $(this).find('i').text(barwidth);     
     });
});