Jquery function to get text and change div style accordingly

Question

I'm trying to get the number in div (generated by server) and make changes to div accordingly (so basically if number is >=4 progress bar would be green with the title 'superb', if >=3 <4, orange progress bar with the title 'good' etc..).

js:

var scores = $("div.progress-bar");
function progressbar_function(){
if (parseInt($(this).text()) >= 4){
$(this).addClass("bg-success");
$(this).text('Superb');
} else if(parseInt($(this).text()) >= 3) {
$(this).addClass("bg-warning");
$(this).text('Good');
}
};
$.each(scores, function(index, item) {
$(item).change(progressbar_function);
});

html

  <ul class="list-group festival-list">
                  <li class="list-group-item">
                    <span class="float-left"><span class="ec ec-banana"></span> Vegan friendly:</span>
                    <div class="progress float-right" style="width: 50%; height: 22px;">
                      <div class="progress-bar" role="progressbar" style="width: {% widthratio vegan_friendly_avg 5 100 %}%" aria-valuenow="{{vegan_friendly_avg|default_if_none:"No reviews yet"}}" aria-valuemin="0" aria-valuemax="5">{{vegan_friendly_avg|floatformat:2|default_if_none:"No reviews yet"}}</div>
                    </div>
                  </li>
                  <li class="list-group-item">
                    <span class="float-left"><span class="ec ec-coffee"></span> Coffea quality:</span>
                    <div class="progress float-right" style="width: 50%; height: 22px;">
                      <div class="progress-bar" role="progressbar" style="width: {% widthratio coffea_quality_avg 5 100 %}%" aria-valuenow="{{coffea_quality_avg|default_if_none:"No reviews yet"}}" aria-valuemin="0" aria-valuemax="5">{{coffea_quality_avg|floatformat:2|default_if_none:"No reviews yet"}}</div>
                    </div>
                  </li>
.
.
.
</ul>

It doesn't work, what am I doing wrong? :(

Answer 1

try this

$(function () {
    $("div.progress-bar").each(function () {
        if (parseInt($(this).text()) >= 4) {
            $(this).addClass("bg-success");
            $(this).text('Superb');
        } else if (parseInt($(this).text()) >= 4) {
            $(this).addClass("bg-warning");
            $(this).text('Good');
        }
    });
});

https://jsfiddle.net/x1yhctad/3/

Answer 2

var scores = $("div.progress-bar");
function progressbar_function($item) {
    if (parseInt($item.text()) >= 4) {
        $item.addClass("bg-success");
        $item.text('Superb');
    } else if (parseInt($(this).text()) >= 3) {
        $item.addClass("bg-warning");
        $item.text('Good');
    }
};
$.each(scores, function (index, item) {
    progressbar_function($(item));
});

This code should work. The problem with your code is that, there is no change event to be triggered on not div's have change event, you should initialize the progressbar style on loading of the script.