calling JavaScript function inside foreach loop

Question

I have rating-stars, using foreach need to addClass depends on the value been passed from the model. i.e. if 2 (then first 2 stars class rated is applied)

 foreach (var rev in Model.Reviews)
 {
   <p class="rating">  
   <span id="5" class="fa fa-star"></span>
   <span id="4" class="fa fa-star"></span>
   <span id="3" class="fa fa-star"></span>
   <span id="2" class="fa fa-star"></span>
   <span id="1" class="fa fa-star"></span>
   </p>

   <script>
       apply(@rev.Rating);
   </script>
 }

apply function:

 <script type="text/javascript">
           function apply(r) {
               $('.rating span').each(function () {
                    if (this.id <= r) {
                        $(this).addClass("rated");
                    }
                });
            }
  </script>

The problem for example: when rev.Rating is 2, the addClass is applied correctly to two ids. But then when next value is 4 it overrides the first and it applies addClass to 4 stars and then next is 4 stars.

the issue it overrides the previous stars with the current model value.

I think because the p class="rating" is the same. But I thought if I pass (this) current reference it shouldt override the other elements. Any ideas why? and How I can fix it.

using this code inside a view, using MVC

What else are you using, since the above block isn't valid js to my knowledge? — Daedalus
– Daedalus, Commented Aug 18, 2015 at 0:58
issue: you have for each review, id's 1-5, which will lead the document to be populated with many id's and that's not valid html — Daemedeor
– Daemedeor, Commented Aug 18, 2015 at 1:02
@Ron MVC means Model/View/Controller, we'll need the specific library please. — Daedalus
– Daedalus, Commented Aug 18, 2015 at 1:02

Arun P Johny · Accepted Answer · 2015-08-18 01:05:51Z

1

Yes the problem is your use of apply method, you can have a single dom ready callback which will update the rated class like below.

In each rating element, you can store its initial value using a data-* value, which can be used in a dom ready handler after the loop.

Also since ID of an element must be unique, you can use another data-* attribute to store the value of the span

jQuery(function($) {
  $('.rating').each(function() {
    $(this).find('span').slice(-$(this).data('default-value')).addClass("rated");
  });
})

.rated {
  border: 1px solid red;
}

<p class="rating" data-default-value="2">
  <!-- data-default-value="@rev.Rating" -->
  <span data-value="5" class="fa fa-star"></span>
  <span data-value="4" class="fa fa-star"></span>
  <span data-value="3" class="fa fa-star"></span>
  <span data-value="2" class="fa fa-star"></span>
  <span data-value="1" class="fa fa-star"></span>
</p>
<p class="rating" data-default-value="4">
  <span data-value="5" class="fa fa-star"></span>
  <span data-value="4" class="fa fa-star"></span>
  <span data-value="3" class="fa fa-star"></span>
  <span data-value="2" class="fa fa-star"></span>
  <span data-value="1" class="fa fa-star"></span>
</p>

So

foreach (var rev in Model.Reviews)
 {
   <p class="rating" data-default-value="@rev.Rating"> 
       <span id="5" class="fa fa-star"></span>
       <span id="4" class="fa fa-star"></span>
       <span id="3" class="fa fa-star"></span>
       <span id="2" class="fa fa-star"></span>
       <span id="1" class="fa fa-star"></span>
   </p>
 }
<script>
    jQuery(function ($) {
        $('.rating').each(function () {
            $(this).find('span').slice(-$(this).data('default-value')).addClass("rated");
        });
    })
</script>

edited Aug 18, 2015 at 1:05

answered Aug 18, 2015 at 1:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Eraph Over a year ago

This is a great alternative solution.

Ben Over a year ago

Awesome! Many Thanks! Didnt know about slice method.

Collectives™ on Stack Overflow

calling JavaScript function inside foreach loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related