bom estou criando um sistema de classificação por estrelas mais não estou conseguindo fazer com que o jquery aplique o Width correto para cada span no exemplo abaixo eu tenho tres DIVS e cada uma das 3 divs dentro delas tem
<span class="ratingAverage" data-average="1.2"></span>
<span class="ratingAverage" data-average="4.2"></span>
<span class="ratingAverage" data-average="5.6"></span>
então com o jquery eu pego o valor de cada um do data-avarege e faz o calculo e aumenta o a barra em %
< 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>
o codigo do jeito que ta retorna desta maneira como na imagem
ao invés de retornar assim
o JQuery faz o calculo so da 1 div e coloca o mesmo resultado nas demais ao invés de refazer o calculo de cada uma de acordo com o valor passado no data-avarege sou iniciante peço ajuda dos mais experientes
div
dentro despan
. Dá uma reestruturada nisso, senão fica difícil!