请问jquery 如何判断文本值并设置CSS？

Question

<style>
    .red{color: red;}
    .blue{color: blue;}
    .green{color: green;}
</style>
<ul>
    <li>59</li>
    <li>88</li>
    <li>100</li>
</ul>

请问如何用jqury或JS，实现根据<li>标签中的分数，设置<li>标签的css？

当<li>的值<60分时，<li>的class设置为red；
当<li>的值>80分时，<li>的class设置为blue；
当<li>的值=100分时，<li>的class设置为green。

Answer 1

DEMO
[...document.querySelector('ul').children].forEach(({classList, textContent: t}) => classList.add(t<60 ? 'red' : t == 100 ? 'green' : t > 80 ? 'blue' : ''))

Answer 2

js 根据 分值添加对应的样式。

var ul = document.querySelector('ul');
var data = [60,80,100];
data.forEach(item=>{
var li = document.createElement('li');
li.innerText = item;
if(item <= 60){
    li.className = 'red';
} else if(item >= 80){
    li.className = 'blue';
} else if(item == 100){
    li.className = 'green';
}
    ul.appendChild(li)
})

Answer 3

用jQuery就比较简单了

$('ul li').forEach(el => {
  const $el = $(el);
  const val = $el.text();
  if (val < 60) {
    $el.css('red')
  } else if (val > 80) {
    $el.css('blue')
  } else if (val == 100) {
    $el.css('green')
  }
});