jQuery 对两个或更多参数使用 "if" 语句

Question

我正在尝试使用 GreaseMonkey

编辑我每天使用的网站 CSS

我正在尝试使用 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");
    }    
  })
});

有两个 class 我的目标名称。我试图在 .item-name 匹配并且 .item-weight >= 该值时触发该单元格更改为红色。我真的是新手，如果这个问题没有任何意义，请见谅。

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

Answer 1

你的循环 .item-name 假设有多个，然后再次选择 .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 路径即可。

jQuery 对两个或更多参数使用 "if" 语句

jQuery using "if" statement for two or more parameters

javascript

jquery

dom

greasemonkey