How can I map rating span with input rating value?

Question

I have dynamic html structure like below example, where in an input field I have rating values.

I am trying to map it , I have tried below code for map

For all rating dom has got value 4, How can I map it input field with same rating div ?

user_519413 · Answer

Your current code is only looking at the first .rating-value element in the collection. You need to loop through them all, which can be done using each().

From there you need to find the .rating span elements related to the current .rating-value. In this case it can be done using jQuery's DOM traversal methods, next(), find() and the :lt selector. Try this:

jQuery($ => {
  $('.rating-value').each((i, el) => {
    $(el).next('.rating').find(`span:lt(${el.value})`).addClass('rating-checked');
  });
});

.rating-checked { color: #C00; }

Also note that Font Awesome provides hollow star icons which makes the differentiation easier to understand:

jQuery($ => {
  $('.rating-value').each((i, el) => {
    $(el).next('.rating').find(`span:lt(${el.value})`).toggleClass('far fas');
  });
});

.rating-checked { color: #C00; }

How can I map rating span with input rating value?

1 Answers