Как изменить цвет в классе nth-child() в jquery?

Question

Я хочу, чтобы звезда рейтинга рейтинга использовала jquery ui диапазона слайдера и установила цвет звезды в классе (.star-group) на красный. , например, если номинальное значение 1, я хочу, чтобы установить красный цвет в (.star-группы: п-й ребенок (5)) здесь код:

$("#slider-range").slider({ 
    orientation: "vertical", 
    range: true, 
    min: 1, 
    max: 5, 
    values: [2,4], 
    slide: function(event, ui) { 
    $("#amount").val(ui.values[ 0 ] + " - " + ui.values[ 1 ]); 
    for(i=1; i<=ui.values[0];i++) { 
     //$(".df:nth-child("+i+")").addClass('clgray'); 
     $(".star-group").addClass('red'); 
    } 
    } 
}); 
$("#amount").val($("#slider-range").slider("values", 0) + 
" - " + $("#slider-range").slider("values", 1)); 

увидеть здесь: https://jsfiddle.net/equ92qn8/

Answer 1

При использовании материалов ссылка на сайт обязательна. Для получения уведомления о появлении инструкции к модели, пожалуйста, заполните следующую форму: https://jsfiddle.net/u3448okL/

Я добавил несколько комментариев в код, чтобы посмотреть, что я сделал. Пожалуйста, спросите, что-то неясно.

Правильный код:

$("#slider-range").slider({ 
    orientation: "vertical", 
    range: true, 
    min: 1, 
    max: 5, 
    values: [2,4], 
    slide: function(event, ui) { 
    $("#amount").val(ui.values[ 0 ] + " - " + ui.values[ 1 ]); 

    // Reset to previous colors (by removing .red class) 
    $(".star-group").removeClass('red'); 

    // For each group of stars ... 
    $(".star-group").each(function(){ 

     // ... check if the number of stars in this object is in the VALUES INTERVAL, then add class RED   
     if ($(this).find('i').length >= ui.values[0] && $(this).find('i').length <= ui.values[1]){ 
      $(this).addClass('red'); 
     } 
    }) 
    } 
}); 
$("#amount").val($("#slider-range").slider("values", 0) + " - " + $("#slider-range").slider("values", 1)); 

Пожалуйста, обратите внимание, что я избегал п-го ребенка() из-за "безопасность". Мы могли бы сделать это с этим, но, на мой взгляд, это было безопаснее.

Пожалуйста, прочитайте здесь, почему я-го ребенка может быть сложно: JQuery nth-child not working properly