maelga maelga - 1 month ago 9
jQuery Question

jquery replace a number (1 to 5) with a html element to create a star rating

I need to replace the digit (1 to 5) multiple times in the following

<span>
:

<div>English <span class="star-rating">3</span></div>
<div>French <span class="star-rating">4</span></div>
<div>German <span class="star-rating">5</span></div>
<div>Italian <span class="star-rating">4</span></div>
<div>Spanish <span class="star-rating">3</span></div>
<div>Portuguese <span class="star-rating">1</span></div>
<div>Arabic <span class="star-rating">1</span></div>


with ready 'star rating' style sheet classes:

For 1 star:

<i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i>


For 2 stars:

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i>


For 3 stars:

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i>


For 4 stars:

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i>


For 5 stars:

<i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i>


I have tried this jquery but nothing seem to happen:

<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$(".star-rating").html().replace('1','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i></span>');
$(".star-rating").html().replace('2','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i></span>');
$(".star-rating").html().replace('3','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i><i class="fa fa-star-o star-empty"></i></span>');
$(".star-rating").html().replace('4','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-empty"></i></span>');
$(".star-rating").html().replace('5','<span class="star-rating"><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star star-full"></i><i class="fa fa-star-o star-full"></i></span>');
})
</script>


Any idea what I do wrong?

Answer

You may not need jQuery for this simple task, CSS works just fine.

See this example: https://jsfiddle.net/axbyed9t/

Here is the modified link sample which has classes with # so you can easily dynamically output html markup if you were doing it before as 1,2,3 https://jsfiddle.net/axbyed9t/2/

So instead of just outputting 1, 2, 4 inside the span, just add it to the span's class i.e. s1 s2 s3 or star1 , star2 etc.. then have classes in CSS with appropriate unicode for FontAwesome.

For filled star use: \f005 For Empty star use : \f006

HTML code example:

<div>English <span class="star-rating star3">3</span></div>
<div>Portuguese <span class="star-rating star1">1</span></div>

And CSS will be:

 .star-rating.star3:after {
  font-family: FontAwesome;
  content: "\f005\f005\f005\f006\f006";
  padding-left: 10px;
}

.star-rating.star1:after {
  font-family: FontAwesome;
  content: "\f005\f006\f006\f006\f006";
  padding-left: 10px;
}
Comments