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

Find parent element data value and display it

本文关键字：显示 数据 元素 查找      更新时间：2023-09-26

我制作了一个简单的水平图形图表，并使用jQuery和html中的data-value来设置每个栏的宽度，这部分工作得很好。我卡住了试图显示每个图形条内的数据值。下面的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);
          });
        });
   });

谢谢你的帮助。

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

从你的代码我得到的是只有一个I标记在每个图形条，所以循环通过I标记不是你需要的。在设置完css后，在一行内正常执行即可。

试试这个

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

下面是在fiddle https://jsfiddle.net/ohwdhdmr/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>

相关文章：