jQuery selector

Question

As you can see, I am running a function for each of td of a specific table for finding text of the selected td. I have to change text inside that div so instead of coding more each function for change text inside div.

I coded this select inside of prev each function:

datevalue = $(this).parent().prev().find('div').find('div').find('span').text();

Is this a good way or not?

$('table > tbody > tr> td:last-child > span:last-child').each(function() {
  ValidationInt = $(this).text();
  datevalue = $(this).parent().prev().find('div').find('div').find('span').text();
  console.log(datevalue);
  ValidationInt = parseInt($(this).text());
  console.log(ValidationInt);
  if (ValidationInt <= 0) {
    $(this).addClass('label-default');
    $(this).prev().addClass('label-default');
  } else if (0 < ValidationInt && ValidationInt <= 25) {
    $(this).addClass('label-danger');
    $(this).prev().addClass('label-danger');
  } else if (25 < ValidationInt && ValidationInt <= 50) {
    $(this).addClass('label-warning');
    $(this).prev().addClass('label-warning');
  } else if (50 < ValidationInt && ValidationInt <= 75) {
    $(this).addClass('label-info');
    $(this).prev().addClass('label-info');
  } else {
    $(this).addClass('label-success');
    $(this).prev().addClass('label-success');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>DiskTest</td>
      <td>176</td>
      <!-- <td><span class="label label-danger">Хийгдэж байна</span></td> -->
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="">
            10/06-10/31 <span>(-25)</span>
          </div>
        </div>
      </td>
      <td>
        <span class='label'>in progress</span>
        <span class='label'>0%</span>
      </td>
    </tr>
    <tr>
      <td>DiskTest</td>
      <td>176</td>
      <!-- <td><span class="label label-danger">Хийгдэж байна</span></td> -->
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="">
            10/06-10/31 <span>(-25)</span>
          </div>
        </div>
      </td>
      <td>
        <span class='label'>progress</span>
        <span class='label'>0%</span>
      </td>
    </tr>
    <tr>
      <td>DiskTest</td>
      <td>176</td>
      <!-- <td><span class="label label-danger">Хийгдэж байна</span></td> -->
      <td>
        <div class="progress">
          <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="">
            10/06-10/31 <span>(-25)</span>
          </div>
        </div>
      </td>
      <td>
        <span class='label'>progress </span>
        <span class='label'>0%</span>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

• When you come back to update the page in 2 weeks, you'll have no idea what this selector points to and it will waste 15 minutes to figure it out.
• If you update the page without redoing this, it will likely point to the wrong element with no warning.
• You're running 5 searches in a row to find just 1 object. That's highly unlikely to be the best way to find that object.

If you can do it, the simplest way is always to either select by id like $("#idOfTargetElement") or select a bunch of elements at once by their class $(".getAllElementsOfThisClass").AndRunThisFunctionOnEachOfThem().