execute Jquery calculation for each corresponding div

Asked

Viewed 148 times

1

well I’m creating a star rating system but I’m not able to get jquery to apply the correct Width for each span in the example below I have three DIVS and each of the 3 Divs within 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 take the value of each of the data-avarege and makes 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>
<div class="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 the way it returns this way as in the image

inserir a descrição da imagem aqui

instead of returning like this

inserir a descrição da imagem aqui

Jquery calculates only the 1 div and puts the same result in the others instead of recalculating each one according to the value passed in the data-avarege am beginner ask help from the most experienced

javascript html jquery html5

  • Diogo, first of all I think you’ll have to review your HTML dude, there’s div inside span. Give it a makeover, otherwise it’s hard!

  • I had not seen already arumei

3 answers

2

The simplest way to solve this would be to go through all objects with the same class and apply the necessary calculations to it, follow 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); }); });

  • I did as Voce said using each using the console.log(Average); returns the most current values when applying width to each one it continues to apply the same value to all

  • 1

    @diogoDsa I made the change in the code, then check it

  • Explaining the landings... I moved the selected to the class about, since all the elements we need are within it. For each about Jquery’s find() function is used to capture another element within the current element, and after that only following the sequence... I hope I’ve helped :)

  • guy you saved my life was already almost giving up thank you.

2

Face I confess that I did not understand your HTML well, but, I leave here an answer I hope that it helps you to give 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>

<div class="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>

  • thanks for the reply of the way Voce did the right I gave an example with 3 Divs so that the div are within a foreach or have more than three Divs as would create a for and apply in all and not only the three

  • I don’t know what your knowledge is in jQuery and how many Ivs are in your code, but I advise you to go there doing Else if like I did, if you see it’s gonna get bad you’ll have to do for only then it gets more complicated the code.

1


This line $('.bg').css('width', 0); seems to me quite unnecessary. Why redefine the width class .bg if the code is only executed 1 time and the span empty already has width 0? There’s no need for that.

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>
<div class="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>

  • perfect worked right I understand a little jquery I know how to use the functions just can’t and structure the code. thanks for the help

Browser other questions tagged javascript html jquery html5

You are not signed in. Login or sign up in order to post.