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

有两个我要定位的类名。我正在尝试获取.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”语句

1 个答案: