查找父元素数据值并显示它

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);     
     });
});

Answer 2

从我的代码中我得到的是每个图形栏中只有一个i标记，因此循环遍历i标记并不是您需要的。在设置css后，只需在一行中正常执行。

试试这个

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

以下是小提琴https://jsfiddle.net/ohwdhdmr/3/

中的工作示例

Answer 3

您要制作以下运行结果：result

码

$(document).ready(function() {
     $('.graph-bar').each(function() { 
          var barWidth = $(this).data('value'); 
          if(parseInt(barWidth,10) < 40) {
          	$(this).addClass('lt');
          } else if(parseInt(barWidth,10) < 60) {
          	$(this).addClass('md');
          } else {
            $(this).addClass('gt');
          }
          $(this).css("width", barWidth + "%");
          $(this).find('i').text(barWidth);     
     });
});

.graph-bar-bg{
  background-color: #bdd;
  padding: 4px 10px;
  position: relative;
}
.graph-bar{
  display: block;
  width: 6px;
  background-color: red;
  margin-bottom: 6px;
}
.lt{
    background-color: #1EAB15;
}
.md{
    background-color: #A9AB15;
}
.gt{
     background-color: #D81C1C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph-bar-bg">
  <span class="graph-bar" data-value="78"><i></i></span>
  <span class="graph-bar" data-value="20"><i></i></span>
  <span class="graph-bar" data-value="50"><i></i></span>
  <span class="graph-bar" data-value="10"><i></i></span>
  <span class="graph-bar" data-value="60"><i></i></span>
</div>