Replacing numbers with Font Awesome (jQuery)

Question

Ok please don't give me slack for asking this question, I'm pretty new to jQuery. I'm kind off making my own rating system using Advanced Custom Fields plugin for Wordpress (Because I couldn't find one).

I have an ACF named Ranking in which I fill in a number, like 1. Using a replace function I found here on Stackoverflow I replace the 1 with <i class="fa fa-star" aria-hidden="true"></i> (one star from Font Awesome).

This works fine for the first item, in this case it's 2 so I get 2 stars. But the second value is a 5 but it shows 2 stars. It looks like it doesn't see the difference or something. If I remove the replace script it really shows a 2 and a 5.

I've tried several things including the /1/g I read some where to use it globally, but that didn't work. Do I need a foreach or something to make this work? Of should I abandon this whole idea of replacing values?

Here is my code (this outputs a value from 1 to 5 (No .5's):

<?php if( get_field('ranking') ): ?>
      <tr>
        <td class="td-top">Ranking:</td>
        <td class="star_ranking"><?php the_field('ranking'); ?></td>
      </tr>
<?php endif; ?>

And the jQuery:

$('.star_ranking').html($('.star_ranking').html().replace(/1/g,'<i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/2/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/3/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/4/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));
$('.star_ranking').html($('.star_ranking').html().replace(/5/g,'<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>'));

I have searched Stackoverflow but I couldn't find a similar question.

Answer 1

Here you go with the solution https://jsfiddle.net/9fo1fz77/

 $('.star_ranking').each(function() { var starCnt = parseInt($(this).html()); $(this).html(''); for(var i=0; i<starCnt; i++){ $(this).append('<i class="fa fa-star" aria-hidden="true"></i>'); } }) 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td class="td-top">Ranking:</td> <td class="star_ranking">1</td> </tr> <tr> <td class="td-top">Ranking:</td> <td class="star_ranking">2</td> </tr> <tr> <td class="td-top">Ranking:</td> <td class="star_ranking">5</td> </tr> </tbody> </table> 

Answer 2

Shiladitya's answer is the way I'd usually go about it, but you might also consider trying the repeat() method:

jQuery(document).ready(function(){
  var faIcon = '<i class="fa fa-star" aria-hidden="true"></i>';

  jQuery('.star_ranking').each(function(){
    jQuery(this).html(
    faIcon.repeat(
      parseInt( jQuery(this).html() )
    ));
  });

});

(You can see it in action at https://jsfiddle.net/travisseitler/phLndwpy/ .)

NOTE: repeat() is part of ECMAScript 6, so it's not as backwards-compatible as Shiladitya's answer. All current browsers support it, though, so YMMV.