使用jQuery将颜色应用于php for-loop中的td元素无法正常工作

Question

我有一个php for循环我正在尝试使用c类黄色的所有td元素，如果该特定元素的值小于3.但由于某种原因它不起作用

<?php
foreach($results as $data){

  echo '<tbody>
      <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c" >'.$data['criticality'].'</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
  </tr>

  </tbody>';}

我正在使用jQuery来实现这一目标。

我的jQuery代码：

if (parseInt($(".c").text()) <= 3)
{
    $(".c").css("background-color" , "yellow");
}

Answer 1

你需要循环：

$(".c").each(function() {
  $(this).toggleClass("yellow",+$(this).text() <= 3);
});

或者，如果您只有3个值：

$(".c:contains(3), .c:contains(2), .c:contains(1)").addClass("yellow")

或在服务器上

<td class="c'.($data['criticality']<=3?" yellow":"").' >'.$data['criticality'].'</td>

我建议你将tbody移到循环之外

＆＃13;

＆＃13;

$(".c").each(function() {
  $(this).toggleClass("yellow", +$(this).text() <= 3);
});

＆＃13;

.yellow {
  background-color: yellow
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">4</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">3</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">5</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

：包含：

＆＃13;

＆＃13;

$(".c:contains(3), .c:contains(2), .c:contains(1)").addClass("yellow")

＆＃13;

.yellow {
  background-color: yellow
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">2</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">3</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>
    <tr class="dropDown">
      <td>1</td>
      <td>'.$data['Title'].'</td>
      <td class="c">5</td>
      <td class="p">'.$data['Priority'].'</td>
      <td>'.$data['Description'].'</td>
      <td>'.$data['Date_Submitted'].'</td>
      <td>'.$data['no'].'</td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在使用返回Class Selector HTML元素的Collection。

$(".c").each(function() {
 $(this).css("background-color" , "yellow");
 })

.c {
  width: 50px;
  height: 50px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="c"></div>
<hr>
<div class="c"></div>