jQuery add different classes per if else statement

Question

I'm struggling to get jQuery to assign the correct class per data value.

If the td .FuelInjectorQty has a value less than 3, it should add the class .FiJlowQty to the parent tr.FuelInjectorRow
If the td .FuelInjectorQty is greater than or equal to 3, it should add the class .FiJhiQty to the parent tr.FuelInjectorRow

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

I have it half working, where it applies one or the other, but will not do it again for the second occurrence. Feel like I need a loop or something, so I was trying out each() but couldn't make it work.

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

See Fiddle: https://jsfiddle.net/bpo29/tmbp67nL/85/

Thank you for any pointers & help!!

tech2017 · Accepted Answer · 2017-06-29 15:41:04Z

2

you need to use $(this) to correctly select the element you r are dealing with.

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

answered Jun 29, 2017 at 15:41

tech2017

1,8061 gold badge13 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PeterKA · Accepted Answer · 2017-06-29 15:45:52Z

You have to target the tr you want to add a class to and then use .addClass( function ) where the function return the appropriate class to add to the tr element.

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

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

/*  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;
}

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

ibrahim mahrir · Accepted Answer · 2017-06-29 15:40:30Z

1

You have to access the .FuelInjectorQty of the current .FuelInjectorRow using find:

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

    if (qte < 3) {
        $(this).addClass("FiJlowQty");
    } else {
        $(this).addClass("FiJhiQty");
    }
});

Note: $(this) will be equivalent to the current .FuelInjectorRow, if you don't use it and use $('.FuelInjectorRow') then the classes will be appended to all the .FuelInjectorRow elements.

answered Jun 29, 2017 at 15:40

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

Lennholm · Accepted Answer · 2017-06-29 15:42:18Z

1

Looping with each() should be the way to go, but you need to use the context of each iteration. Right now you're just reselecting every element on the page in every iteration

The context is this so here's what you need to do:

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

answered Jun 29, 2017 at 15:42

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

Comments

fdomn-m · Accepted Answer · 2017-06-29 15:42:30Z

1

Within the loop, you need to use the context of the loop, 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"); 
});

answered Jun 29, 2017 at 15:42

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Collectives™ on Stack Overflow

jQuery add different classes per if else statement

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related