jQuery с использованием оператора "if" для двух или более параметров - PullRequest
Новая
       11

jQuery с использованием оператора "if" для двух или более параметров

0 голосов
/ 27 февраля 2019

Я пытаюсь редактировать CSS веб-сайта, который я использую ежедневно с GreaseMonkey

Я пытаюсь сделать это с помощью 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>

1 Ответ

0 голосов
/ 27 февраля 2019

Ваш цикл .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>

Обратите внимание, что если у вас на странице много таблиц, вам нужно проявить творческий подход в поиске конкретной, просто нужно знать путь к ней.

...