对两个或多个参数使用“if”语句的jQuery

$(document).ready(function() { $(".item-name").each(function() { if ($(".item-name").text() == 'Chair' && $(".item-weight").text() >= 20.0 ) { $(this) .css("font-weight", "bold") .css("background-color", "red"); } else { $(this) .css("font-weight", "normal"); } }) });

<div class="col-xs-12"> <table class="table table-striped table-responsive"> <thead> <tr> <td colspan="8" class="room-report-heading-td"> <div class="room-report-heading"> <div class="each-room pull-left"> <span class="room-number">1.</span> <span class="room-name">Room</span> </div> <div class="each-room-statistics pull-right"> <span class="room-stat"> 1 items â¢ 5.0ft<sup>3</sup> â¢ 20.0lb </span> </div> <br style="clear:both;"> </div> </td> </tr> <tr class="columns-headings"> <th class="item-count">Count</th> <th class="item-name">Name</th> <th class="item-volume">Volume</th> <th class="item-total-volume">Total Volume</th> <th class="item-weight">Weight</th> <th class="item-total-weight">Total weight</th> </tr> </thead> <tbody> <tr> <td class="item-count"><span>1</span></td> <td class="item-name"><span>Chair</span></td> <td class="item-volume"><span>5.0</span></td> <td class="item-total-volume"><span>5.0</span></td> <td class="item-weight"><span>20.0</span></td> <td class="item-total-weight"><span>20.0</span></td> </tr> </tbody> </table>

你的循环 .item-name 假设存在多个,但随后选择。项名称再次需要文本值。

相反,循环父元素,然后找到要操作的子元素,例如:

$("table tbody tr").each(function() {
  if ($(this).find(".item-name").text() == 'Chair' && $(this).find(".item-weight").text() >= 20.0) {
    $(this).css("font-weight", "bold")
      .css("background-color", "red");
  } else {
    $(this).css("font-weight", "normal");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-xs-12">
  <table class="table table-striped table-responsive">
    <thead>
      <tr>
        <td colspan="8" class="room-report-heading-td">
          <div class="room-report-heading">
            <div class="each-room  pull-left">
              <span class="room-number">1.</span>
              <span class="room-name">Room</span>
            </div>
            <div class="each-room-statistics pull-right">
              <span class="room-stat">
              1 items
              â¢
              5.0ft<sup>3</sup>
              â¢
              20.0lb
            </span>
            </div>
            <br style="clear:both;">
          </div>
        </td>
      </tr>
      <tr class="columns-headings">
        <th class="item-count">Count</th>
        <th class="item-name">Name</th>
        <th class="item-volume">Volume</th>
        <th class="item-total-volume">Total Volume</th>
        <th class="item-weight">Weight</th>
        <th class="item-total-weight">Total weight</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td class="item-count"><span>1</span></td>
        <td class="item-name"><span>Chair</span></td>
        <td class="item-volume"><span>5.0</span></td>
        <td class="item-total-volume"><span>5.0</span></td>
        <td class="item-weight"><span>20.0</span></td>
        <td class="item-total-weight"><span>20.0</span></td>
      </tr>

      <tr>
        <td class="item-count"><span>1</span></td>
        <td class="item-name"><span>Bed</span></td>
        <td class="item-volume"><span>5.0</span></td>
        <td class="item-total-volume"><span>5.0</span></td>
        <td class="item-weight"><span>60.0</span></td>
        <td class="item-total-weight"><span>20.0</span></td>
      </tr>
    </tbody>
  </table>

注意,如果页面上有许多表,则需要创造性地查找特定的表,只需知道其dom路径即可。