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" );

这很好用，但我需要它在两个数字之间进行比较，例如 >=5 && <=10。有什么办法可以实现吗？

- Mark

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>

- Tushar

Answer 2

@Tushar的回答是正确的，因为它仅对需要操作的元素进行操作。

我只添加了这种方法，以防有必要根据演示中显示的值向每个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>

- PeterKA

---

对于 addClass 回调函数，+1。 - Tushar

如果条件成立，那么 return (n >= 1 && n <= 10) ? 'green' : ''; 怎么样？只有在条件为真时才添加一个类。 - Tushar

@tushar，你说得对。好观点。这就是我最初的想法，但后来我认为当前版本可能更有用，因为它处理整个集合。 - PeterKA

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

- Mi-Creativity