jQuery using "if" statement for two or more parameters

I'm trying to edit CSS of a website I'm using on daily basis with GreaseMonkey

I'm trying to do it with jQuery this is my code:

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

there are two with class names I'm targeting. I'm trying to get when .item-name matches and .item-weight is >= of that value to trigger that cell to change to red. I'm really a novice so apologies if this question doesn't make any sense.

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

Solution

Your looping .item-name's so presuming there is multiple but then selecting .item-name again expecting there to be text values.

Instead, loop over the parents, then find the child elements to manipulate, for example:

$("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>

Note if you have many tables on the page you need to get creative in finding the specific one, just need to know its dom path.