如何根据元素内部的值更改元素的背景？

Question

我有一个数字表 - 如果<td>中的数字低于某个数字，我想通过添加一个类来强调它<td>。我的jQuery知识有限，但我很确定这是可行的。

我使用.text（）返回<td>和.each（）中的值，逐一检查数字。

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".carpet td").each(function() {
    if ($(this).text() < 5) {
      this.addClass("red")
    }
  });

});

＆＃13;

.carpet {
  background-color: aliceblue;
}

.carpet td {
  padding: 12px 20px;
}

.red {
  background-color: #E7295B;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="carpet">
  <tbody>
    <tr>
      <td>2</td>
      <td>7</td>
      <td>4</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

更新了你的小提琴。您必须将文本解析为数字，并将addClass修复为jQuery对象。

https://jsfiddle.net/9mmqjtk5/12/

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".carpet td").each(function() {
    if (parseInt($(this).text(), 10) < 5) {
      $(this).addClass("red")
    }
  });

});

＆＃13;

.carpet {
  background-color: aliceblue;
}

.carpet td {
  padding: 12px 20px;
}

.red {
  background-color: #E7295B;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="carpet">
  <tbody>
    <tr>
      <td>2</td>
      <td>7</td>
      <td>4</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;