jQuery - 如果包含 x 和 y 之间的数字答案

【问题标题】：jQuery - If contains number between x and yjQuery - 如果包含 x 和 y 之间的数字
【发布时间】：2015-10-29 04:15:18
【问题描述】：

我目前有一个通过 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 &&

知道我该怎么做吗？

【问题讨论】：

标签： jquery contains addclass

【解决方案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>

【讨论】：

【解决方案2】：

@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>

【讨论】：

对于addClass 回调+1
return (n >= 1 && n <= 10) ? 'green' : ''; 怎么样？仅在条件为真时添加一个类
@tushar，你是对的。好点子。这就是我最初的想法，之前我认为当前版本可能更有用，因为它处理的是整个系列。

【解决方案3】：

这也可以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>

【讨论】：