Как такое реализовать?

Question

[Даниил Сухих]

У меня есть карточка продукта и в ней есть атрибут data-raiting и ещё в ней есть звёздочки как в зависимости от атрибута data-raiting(в нём цифры от 1 до 5) красить звёздочки в это карточке(color).

<div data-raiting="4" class="product">
                <div class="product_body">
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <div class="product_footer">
                    <a class="product_boy" href="#">Купить</a>
                    <a class="product_basket" href="#">В корзину</a>
                </div>
            </div>

Answer 1

[alvvi]

Можно и без jQuery, на CSS сделать.
Но если надо именно с jQuery:

$('[data-raiting]').each(function(i, el) {
  var $el = $(el)
  var raiting = $el.data('raiting')
  var $icons = $el.find('.stars i')
  // дальше берем нужное количество элементов и добавляем класс/красим 
  // через style
  $icons.slice(0, raiting + 1).addClass('star--filled')
})

.star--filled {
  color: yellow;
}