execute JQuery calculation for each corresponding div

Question

execute JQuery calculation for each corresponding div

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

0

I'm creating a star rating system but I can not get the jquery to apply the correct Width for each span in the example below. I have three DIVs and each of the 3 divs inside them has

<span class="ratingAverage" data-average="1.2"></span>
<span class="ratingAverage" data-average="4.2"></span>
<span class="ratingAverage" data-average="5.6"></span>

Then with jquery I get the value of each of the data-avarege and does the calculation and increases the bar in%

< script type = "text/javascript" >
  $(function() {
    var average = $('.ratingAverage').attr('data-average');

    function avaliacao(average) {
      average = (Number(average) * 20);
      $('.bg').css('width', 0);
      $('.barra .bg').animate({
        width: average + '%'
      }, 500);
    }

    avaliacao(average);
  }); <
/script>

<!-- begin snippet: js hide: false console: true babel: false -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col col-12">
<div class="about">
   <span class="ratingAverage" data-average="1.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
<div class="about">
 <span class="ratingAverage" data-average="4.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
 <div class="about">
  <span class="ratingAverage" data-average="5.6"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

The code of the way you return it this way as in the image

insteadofreturninglikethis

JQuery makes the calculation of 1 div and puts the same result in the others instead of redoing each one according to the value passed on the date-avarege I am beginner I ask for help from the most experienced

javascript html jquery html5

asked by anonymous 21.09.2018 / 23:58

3 answers

2

The simplest way to solve this would be to go through all the objects with the same class and apply the necessary calculations for it, following an example code of how to go through it. $(document).ready(function(){ //PERCORRE TODOS OS OBJETOS COM A CLASSE .ratingAverage $(".about").each(function(){ var average = $(this).find('.ratingAverage').data('average'); average = (Number(average) * 20); $(this).find('.bg').css('width', 0); $(this).find('.bg').animate({ width: average + '%' }, 500); }); });

22.09.2018 / 00:33

1

I confess that I did not understand your HTML well, but I leave here an answer I hope it helps you to give you a north there:

$(function() {
    
    $('.ratingAverage').each(function(index) {
      var average = $(this).attr('data-average');
      average = average * 20;
      
      $('.bg').css('width', 0);
      
      if(index == 0) {
        $('.bg:eq(0)').animate({
          width: average + '%'
        }, 500);
      } else if(index == 1) {
        $('.bg:eq(1)').animate({
          width: average + '%'
        }, 500);
      } else if(index == 2) {
        $('.bg:eq(2)').animate({
          width: average + '%'
        }, 500);
      }

    })

});

.bg{background-color: yellow; height: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="col col-12">
<div class="about">
   <span class="ratingAverage" data-average="1.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
<div class="about">
 <span class="ratingAverage" data-average="4.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
 <div class="about">
  <span class="ratingAverage" data-average="5.6"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

22.09.2018 / 01:21

I can not convert seconds to minutes Change string Python

score 1 · Accepted Answer

This $('.bg').css('width', 0); line seems very unnecessary to me. Why reset the width of class .bg if the code only runs 1 time and the span empty already has width 0 ? There is no such need.

My suggestion is similar to @JrD, but a little more simplified:

$(function(){
   var avg = $('.ratingAverage'); // seleciona todas as spans com a classe
   avg.each(function(i){ // percorre os elementos
      var average = Number($(this).data('average'))*20; // faz o cálculo
      $('.bg:eq('+i+')') // busca o elemento pelo index
      .animate({
         width: average + '%'
      }, 500);
   });
});

.bg{
   background: red;
   height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col col-12">
<div class="about">
   <span class="ratingAverage" data-average="1.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
<div class="about">
 <span class="ratingAverage" data-average="4.2"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>

<div class="col col-12">
 <div class="about">
  <span class="ratingAverage" data-average="5.6"></span>
  <span class="article" data-id=""></span>
  <div class="barra">
    <span class="bg"></span>
    <div class="overhiden">
      <span class="stars">
      <span class="star" data-vote="1"></span>
      <span class="star" data-vote="2"></span>
      <span class="star" data-vote="3"></span>
      <span class="star" data-vote="4"></span>
      <span class="star" data-vote="5"></span>
      </span>
    </div>
  </div>
</div>
</div>