3

-- link removed --

How can I convert the numbers in the above website into stars using Jquery with a for loop to add however many stars, and a round up, round down function.

I prefer to round using this example:

  • 3.0 if lower than 3.25; this will include 3 full stars, 2 empty stars
  • 3.5 if between 3.25 and 3.75; this will include 3 full stars and 1 half star, 1 empty star
  • 4.0 if higherthan 3.75; this will include 4 full stars, 1 empty star
OneSneakyMofo
  • 1,305
  • 2
  • 19
  • 33

1 Answers1

2

You would need to update your list of ratings to be in a selectable container, and the rading would need to be encapsulated in it's own selector.

HTML:

<ul class="ratings">
  <li>Overall Rating Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Grounds Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Price Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Staff Data (no stars): <span>3</span></li>
  <li>Overall Maintenance Data (no stars): <span>2.85714285714</span></li>
  <li>Overall Noise Data (no stars): <span>3.42857142857</span></li>
  <li>Overall Amenities Data (no stars): <span>3.57142857143</span></li>
  <li>Overall Location Data (no stars): <span>3.28571428571</span></li>
  <li>Overall Parking Data (no stars): <span>3.28571428571</span></li>
  <li>Overall Safety Data (no stars): <span>3</span></li>
</ul>

JS:

$(document).ready(function() {
  $('ul.ratings li').each(function() {
    var $el = $(this);
    var rating = $el.find('span').text();
    var $stars = $('<div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div></div>');
    var full_stars = Math.floor(rating);
    var half_star = false;
    var remainder = rating - full_stars;

    if(remainder >= 0.25 && remainder <= 0.75) {
      half_star = true;
    } else if(remainder > 0.75) {
      full_stars += 1;
    }   

    $stars.find('div:lt('+full_stars+')').addClass('star');
    if(half_star) {
      $stars.find('div:eq('+full_stars+')').addClass('half-star');
    }

    $el.find('span').replaceWith($stars);
  });
});

The CSS I'll leave up to you.

EDIT: Updated $stars to use <div /> instead of <span />

Matthew Nessworthy
  • 1,428
  • 10
  • 19
  • Thanks. I'll let you know how it turns out. – OneSneakyMofo May 31 '11 at 13:28
  • Hey, I almost have this, but the span:lt and span:eq are not working correctly. I had to replace the spans above with divs as the stars were not displaying. To test it out to see if it would work, I tried just $stars.find('div:lt(3)').addClass('full-star'); It only showed empty stars. I'll look up other ways of doing the lt, but if you have any advice, send it my way. – OneSneakyMofo May 31 '11 at 16:15
  • Have you use firefug to inspect the source after the JS has run to see what changes have been applied? – Matthew Nessworthy May 31 '11 at 16:27
  • As I said, it's showing the empty stars, but it's not finding the affected stars and replacing it with the full star. I've omitted the half star for testing purposes for the time being. From your code, it should work, but I'm not sure why it's not ;\ – OneSneakyMofo May 31 '11 at 16:36
  • @OneSneakyMofo - Could you send me a link to working copy so I can take a look? – Matthew Nessworthy May 31 '11 at 16:56
  • http://chrisautwell.com/apartments/stuff/ratings-alpha.php Here you go. I'll stop messing with the CSS so you can take a look, lol. – OneSneakyMofo May 31 '11 at 17:00
  • 1
    I've updated the code to use divs instead of spans as per your live example. The problem was you were not encapsulating the star divs within a div of it's own. Hence the `:eq` and `:gt` did not have any child elements to find. – Matthew Nessworthy May 31 '11 at 17:06
  • Oh man... I didn't even see that. I'll test it out. Edit: worked like a charm. Thanks for the lt/eq. That is some slick stuff. – OneSneakyMofo May 31 '11 at 17:08