jQuery - если содержит число между x и y

Question

В настоящее время у меня есть таблица, заполняемая цифрами через PHP. Я хочу использовать jQuery, чтобы проверить, содержит ли ячейка число между датами от 1 до 10, а затем применить класс к этой ячейке.

Это то, что у меня есть ...

HTML - PHP населяет номера

<table> 
    <tr> 
    <td class="times"> 11:00</td> 
    <td class="number"> 10 </td> 
    </tr> 
    <tr> 
    <td class="times"> 12:00</td> 
    <td class="number"> 15 </td> 
    </tr> 
</table> 

JQuery

$("td.number:contains('10')").addClass("green"); 

Это прекрасно работает, но мне нужно, чтобы сделать ряд между 2-х номеров как> = 5 & & < = 10.

Любая идея, как я могу это сделать?

Answer 1

Использовать filter для фильтрации элементов на основе некоторых условий.

Уменьшите набор согласованных элементов до тех, которые соответствуют селектору или проходят проверку функции.

Когда true возвращается элемент будет добавлен, чтобы установить и когда false возвращается элемент будет удален из набора.

Демо

$('td.number').filter(function() { 
 
    // Get the number and convert it to Number 
 
    var num = +($(this).text().trim()); 
 

 
    return num >= 5 && num <= 10; 
 
}).addClass('green');

.green { 
 
    color: green; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="times">11:00</td> 
 
    <td class="number">10</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="times">12:00</td> 
 
    <td class="number">15</td> 
 
    </tr> 
 
</table>

Answer 2

Это тоже работает JSFiddle

$("td.number").each(function() { 
 
    var inner = $(this).text(); 
 
    if (!isNaN(inner) && 0 < inner && inner <= 10) { 
 
    $(this).addClass('green'); 
 
    } 
 
    // can add one or more "else if" statements for multi-stage comparison 
 
    // like add more classes or filter out unneeded elements 
 
});

.green { 
 
    color: white; 
 
    font-weight: bold; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="times">11:00</td> 
 
    <td class="number">10</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="times">12:00</td> 
 
    <td class="number">15</td> 
 
    </tr> 
 
</table>

Answer 3

@ Tushar's является правильным ответом, поскольку он работает только с теми элементами, которым необходимо управлять.

Я только добавил этот подход для случая, когда может возникнуть необходимость добавить класс каждый td.number, на основе значения, как показывают в демо. Или вы можете заменить 'yellow' на '', и он выполнит текущую работу.

$('td.number').addClass(function() { 
 
    var n = +this.textContent; 
 
    return (n >= 1 && n <= 10) ? 'green' : 'yellow'; 
 
});

.green { 
 
    background-color: green; 
 
} 
 
.yellow { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="times">11:00</td> 
 
    <td class="number">10</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="times">12:00</td> 
 
    <td class="number">15</td> 
 
    </tr> 
 
</table>