Доступ к элементам массива в Jquery

Question

У меня есть несколько строк, подобных этой:

<tr>        
    <TD class="Lo">90%</TD>                        
    <TD class="Poor">80%</TD>                   
    <TD class="Lo">89%</TD>                     
    <TD class="Mid">85%</TD>                        
    <TD class="Poor">85%</TD>                       
    <TD class="Mid">85%</TD>                        
    <TD class="Hi">85%</TD>
</tr>

Теперь я хочу получить доступ к любым элементам в этой строке и установить цвет этой строки на основе значений:

• Если 80% <значение <= 85% желтого цвета, </li>
• Если 90% <значение <= 95% красного цвета, </li>
• Если 95% <значение <= 100%, то зеленый цвет. </li>

Как это сделать с помощью jQuery?

Answer 1

Для этого вам может пригодиться несколько пользовательских селекторов .

Например, вот что называется "высокий":

jQuery.expr[':'].high = '(put your boolean logic here, inside quotes)';

Затем, после того как у вас есть пользовательские селекторы, сделайте это для каждого:

$('td:high').css('color', 'green');

Answer 2

Вот рабочее решение и логика выделения, выполненная на стороне клиента.

Учитывая html таблицу с id = "stats", что означает, что блики будут применены для td этой таблицы.

<table id="stats">
    <tr>
        <td>83%</td>                                           
        <td>96%</td>
        <td>92%</td>
    </tr>
    <tr>
        <td>100%</td>                                           
        <td>94%</td>                                  
        <td>85%</td>                                            
    </tr>
</table>

Javascript с JQuery для выполнения основных моментов.

<script type="text/javascript">
    $(window).ready(function() {
        // for each td element within elements whose id="stats" 
        $("#stats td").each(function() {
            // current td element
            var td = $(this);
            // do it once only
            var val = td.text().replace('%', '');

            td.css('background',  val > 80 && val <= 85    ? 'yellow' 
                                  : val > 90 && val <= 95  ? 'red'
                                  : val > 95 && val <= 100 ? 'green'
                                  : 'black'); // black is default
        });

    }); 
</script>

Answer 3

Попробуйте что-то вроде этого

$("td").each(function() {
  if ($(this).text().replace('%') <= 90) {
    $(this).css('background','red');
  } else if ($(this).text().replace('%') <= 100) {
    $(this).css('background','green');
  }
  // repeat ...
});