CODEWITHSUNDEEP
jquerycontainsaddclass
Mark
Mark

Reputation: 833

jQuery - If contains number between x and y

I currently have a table that is populated with numbers via PHP. I want to use jQuery to check if a cell contains a number between lets say 1 and 10 and then apply a class to that cell.

This is what I have...

HTML - PHP populates numbers

<table>
  <tr>
    <td class="times"> 11:00</td>
    <td class="number"> 10 </td>
  </tr>
  <tr>
    <td class="times"> 12:00</td>
    <td class="number"> 15 </td>
  </tr>
</table>

jQuery

$( "td.number:contains('10')").addClass( "green" );

This works great but I need it to do a number between 2 numbers like >=5 && <=10.

Any idea how I can do this?

Upvotes: 3

Views: 1389

Answers (3)

PeterKA
PeterKA

Reputation: 24638

@Tushar's is the correct answer for it operates on only those elements that need to be operated on.

I only added this approach for a case where there may be a need to add a class to every td.number, based on the value as show in the demo. Or you may replace 'yellow' with '' and it would do the current job. 

$('td.number').addClass(function() {
  var n = +this.textContent;
  return (n >= 1 && n <= 10) ? 'green' : 'yellow';
});
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="times">11:00</td>
    <td class="number">10</td>
  </tr>
  <tr>
    <td class="times">12:00</td>
    <td class="number">15</td>
  </tr>
</table>

Upvotes: 1

Mi-Creativity
Mi-Creativity

Reputation: 9654

This works too JSFiddle

$("td.number").each(function() {
  var inner = $(this).text();
  if (!isNaN(inner) && 0 < inner && inner <= 10) {
    $(this).addClass('green');
  }
  // can add one or more "else if" statements for multi-stage comparison
  // like add more classes or filter out unneeded elements
});
.green {
  color: white;
  font-weight: bold;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="times">11:00</td>
    <td class="number">10</td>
  </tr>
  <tr>
    <td class="times">12:00</td>
    <td class="number">15</td>
  </tr>
</table>

Upvotes: 0

Tushar
Tushar

Reputation: 87203

Use filter to filter elements based on some condition.

Reduce the set of matched elements to those that match the selector or pass the function's test.

When true is returned the element will be added to set and when false is returned the element will be removed from set.

Live Demo

$('td.number').filter(function() {
  // Get the number and convert it to Number
  var num = +($(this).text().trim());

  return num >= 5 && num <= 10;
}).addClass('green');
.green {
  color: green;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="times">11:00</td>
    <td class="number">10</td>
  </tr>
  <tr>
    <td class="times">12:00</td>
    <td class="number">15</td>
  </tr>
</table>

Upvotes: 2

Related Questions