2
\$\begingroup\$

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>

\$\endgroup\$
  • 1
    \$\begingroup\$ You could provide more information about the context of its usability. That would help people to help you. \$\endgroup\$ – Billal Begueradj Oct 20 '17 at 4:39
3
\$\begingroup\$
  • 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().

\$\endgroup\$
  • \$\begingroup\$ Your point about updating the page is the most important one. The html will surely change. The hierarchy is never rigid during the development. Noone wants to keep fixing the bug with the ever-wrong-pointing-selector again, and again, and again. Go class-based selectors! \$\endgroup\$ – Igor Soloydenko Oct 23 '17 at 6:15
  • \$\begingroup\$ I am not sure you get my point but thanks for anyway \$\endgroup\$ – Munkhdelger Tumenbayar Oct 23 '17 at 6:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.