how to create multiple instance of a css class?

Question

I have to create multiple instances of the same css class to run this block of code which displays user comments and ratings.(In ratings, I set width of lit stars according to comment's rating) So I have to create as many instances of css class as there are comments.

<script>
var wid=<?=$comment->rating?>*20; //20 is the width of 1-star, comment->rating 
                                      //gives me rating of that particular comment.   
jQuery(function($){
$(".rating-star").css('width',wid);  //setting width according to calculated wid.
});
</script>

As there is only one rating-star class, all comments are getting the same star rating. How do I create as many instances of rating-star class as there are comments? Thanks in advance! Great community!

Why not just set the width property on the rating stars directly? If you have 100 comments, that means you're going to run 100 CSS selectors for something that could have been done along with HTML — Colin M
– Colin M, Commented Mar 6, 2013 at 19:11
@ColinMorelli How to set the width property directly? Dint catch you there. — Nagendra Rao
– Nagendra Rao, Commented Mar 6, 2013 at 19:14
When you print the stars: <div class="rating-star" style="width: <?=$comment->rating * 20?>px"></div> — Colin M
– Colin M, Commented Mar 6, 2013 at 19:15
@ColinMorelli Ah.. that's great! Didn't think in that way! Thanks for the tip! — Nagendra Rao
– Nagendra Rao, Commented Mar 6, 2013 at 19:19

stursby · Accepted Answer · 2013-03-06 19:36:46Z

3

Another way of doing this is by using data attributes and echo out the rating in there.

Working DEMO on jsFiddle.

So and example HTML item would look something like this:

<li>
    <p>item one</p>
    <span class="rating-star" data-rating="1"></span>
</li>

And your JS function:

(function () {

    // cache the selector
    $ratings = $('.rating-star');

    // run foreach on selector
    $ratings.each(function (index) {

        // variables
        var el = $(this),
            rating = el.data('rating'),
            width = rating * 20;

        // apply width
        el.css('width', width + "px");

    });

})();

And your CSS could use a star image, with background-repeat.

answered Mar 6, 2013 at 19:36

stursby

8792 gold badges12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jrummell · Accepted Answer · 2013-03-06 19:25:17Z

2

You actually don't need to create as many classes as you have comments.

Here's what I mean, and there are a few ways to do this. Here are two:

Create .rating1 through .rating5 for instance, and as you go through and create the element ordinarily just given .rating-star, use this for the class:

class="rating-star rating<? $comment->rating $>"

Then in CSS:

.rating1 { width: 20px; }
.rating2 { width: 40px; }

..etc

Or... less awesome / slower way:

Where you have class='rating-star' right now, also set rating='rating $>' as a custom tag. Then:

$(".rating-star[rating]").each(function(){ 
    $(this).addClass("rating"+$(this).attr("rating") 
})

...with the same CSS as above.

edited Mar 6, 2013 at 19:25

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

answered Mar 6, 2013 at 19:21

digitalextremist

5,9924 gold badges46 silver badges64 bronze badges

1 Comment

digitalextremist Over a year ago

Setting style="width: ?" directly is more data for the browser to download than my first example. If you just set another class along with the one you already do, you'll be efficient as well as accurate.

Collectives™ on Stack Overflow

how to create multiple instance of a css class?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related