Question

我很难让jQuery为每个数据值分配正确的类。

如果td .FuelInjectorQty的值小于3，它应该将类.FiJlowQty添加到父tr.FuelInjectorRow
如果td .FuelInjectorQty大于或等于3，它应该将类.FiJhiQty添加到父tr.FuelInjectorRow

if ($('.FuelInjectorQty').data('value') < 3) {
  $('.FuelInjectorRow').addClass("FiJlowQty");
} else if ($('.FuelInjectorQty').data('value') >= 3) {
  $('.FuelInjectorRow').addClass("FiJhiQty");
}

我有一半的工作，它适用于其中一种，但在第二次发生时不再这样做。感觉我需要一个循环或其他东西，所以我尝试了每个（）但不能使它工作。

   $('.FuelInjectorRow').each(function(i) {
    if ($('.FuelInjectorQty').data('value') < 3) {
      $('.FuelInjectorRow').addClass("FiJlowQty");
    } else if ($('.FuelInjectorQty').data('value') >= 3) {
      $('.FuelInjectorRow').addClass("FiJhiQty");
    }
  });

见小提琴： https://jsfiddle.net/bpo29/tmbp67nL/85/

感谢您提出任何指示。帮助!!

Answer 1

您需要使用$(this)来正确选择您正在处理的元素。

https://jsfiddle.net/tmbp67nL/86/

jQuery(document).ready(function($) {   
  $('.FuelInjectorRow').each(function(i) {
    if ($(this).find('.FuelInjectorQty').data('value') < 3) {
      $(this).addClass("FiJlowQty");
    } else if ($(this).find('.FuelInjectorQty').data('value') >= 3) {
      $(this).addClass("FiJhiQty");
    }
  });    
});

Answer 2

您必须将要添加类的tr定位到，然后使用.addClass( function )，其中函数返回适当的类以添加到tr元素。

$('.FuelInjectorRow').addClass( function() {
    return +$(this).find('.FuelInjectorQty').data('value') < 3 ? 'FiJlowQty' : 'FiJhiQty';
} );

＆＃13;

$(function() {
    $('.FuelInjectorRow').addClass( function() {
        return +$(this).find('.FuelInjectorQty').data('value') < 3 ? 'FiJlowQty' : 'FiJhiQty';
    } );
});

＆＃13;

/*  Uploads Grid */

#UploadGrid {
  font-size: 10px;
  display: block;
  width: 238px;
  float: left;
}

#UploadGrid table {
  margin: 0px;
  width: auto;
  text-align: center;
  margin-bottom: 15px;
}

#UploadGrid td {
  padding: 0;
  height: 15px;
  border-bottom: 1px solid #000;
}

td.DocUploadTitle {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
  background-color: black !important;
  color: white;
  height: 35px !important;
  text-transform: uppercase;
  text-indent: 2em;
  padding-top: 4px !important;
}

.DocUploadGridHeader {
  text-align: center;
  font-weight: bold;
  height: 30px;
}

.DNCol {
  width: 70px
}

.DDCol {
  width: 65px
}

.PNCol {
  width: 78px
}

.QCol {
  width: 25px
}

#UploadGrid table td:nth-child(odd) {
  background: #e0e0e0
}

/*
.FuelInjectorRow td {background: #f1b5b5 !important} 
*/

.FiJlowQty td {
  background: #f1b5b5 !important
}


.FiJhiQty td {
  background: #8fe28f !important
}

.FiJlowNote {
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  background-color: #f1b5b5;
}

.FiJhiNote {
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  background-color: #8fe28f;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="UploadGrid">
  <table width="100%" cellpadding="0" cellspacing="0" style="">
    <thead>
      <tr>
        <td colspan="4" class="DocUploadTitle">Your Uploaded Documents</td>
      </tr>
      <tr class="DocUploadGridHeader">
        <td class="DNCol">Document
          <br>Number</td>
        <td class="DDCol">Document
          <br>Date</td>
        <td class="PNCol">Part
          <br>Number</td>
        <td class="QCol">Qty.</td>
      </tr>
    </thead>
    <tbody>
      <tr class="NotFuelInjector">
        <td>1111</td>
        <td>1/1/2017</td>
        <td class="">120181C92R</td>
        <td class="" data-value="5">5</td>
      </tr>

      <tr class="FuelInjectorRow">
        <td>Should Be Red</td>
        <td>3/1/2017</td>
        <td class="FuelInjectorCell">288865A1R</td>
        <td class="FuelInjectorQty" data-value="2">2</td>
      </tr>

      <tr class="NotFuelInjector">
        <td>21313</td>
        <td>4/1/2017</td>
        <td class="">1315328C4R</td>
        <td class="" data-value="1">1</td>
      </tr>
      <tr class="NotFuelInjector">
        <td>213212</td>
        <td>5/1/2017</td>
        <td class="">1315328C4R</td>
        <td class="" data-value="1">1</td>
      </tr>
      <tr class="FuelInjectorRow">
        <td>Shouldnt Be Red</td>
        <td>6/14/2017</td>
        <td class="FuelInjectorCell">JR908507</td>
        <td class="FuelInjectorQty" data-value="4">4</td>
      </tr>

    </tbody>
  </table>

  <div class='FiJlowNote'>The red highlighted row(s) are Fuel Injectors that progress will not be awarded for.
    <br> You must install Fuel Injectors in quantities of 3 or more to recieve progress.</div>

  <div class='FiJhiNote'>The green highlighted row(s) are Fuel Injectors that progress WILL be awarded for.
    <br> You have installed Fuel Injectors in quantities of 3 or more.</div>

</div>

＆＃13;

Answer 3

您必须使用.FuelInjectorQty访问当前.FuelInjectorRow的{{1}}：

find

注意： $('.FuelInjectorRow').each(function(i) { var qte = $(this).find('.FuelInjectorQty').data('value'); if (qte < 3) { $(this).addClass("FiJlowQty"); } else { $(this).addClass("FiJhiQty"); } });将等同于当前$(this)，如果您不使用它并使用.FuelInjectorRow，则会将这些类附加到所有$('.FuelInjectorRow')元素。

Answer 4

循环使用each()应该是可行的方法，但您需要使用每次迭代的上下文。现在，您只需在每次迭代中重新选择页面上的每个元素

上下文为this，所以您需要做的是：

$('.FuelInjectorRow').each(function() {
  var $row = $(this);
  var value = $row.find('.FuelInjectorQty').data('value');

  if (value < 3) {
    $row.addClass("FiJlowQty");
  } else if (value >= 3) {
    $row.addClass("FiJhiQty");
  }
});

Answer 5

在循环中，您需要使用循环的上下文this：

$('.FuelInjectorRow').each(function(i) {
  var row = $(this);
  var qty = row.find('.FuelInjectorQty').data('value');
  if (qty < 3) 
     row.addClass("FiJlowQty");
  else
    row.addClass("FiJhiQty"); 
});

jQuery为if else语句添加不同的类

5 个答案: