Identify class in child element (jquery)

Question

I have a table, which is effectively a DB dump, with 3 bootstrap gylphicons per row to represent check/unchecked checkboxes

I want to use jquery to check which gylphicon is present in the second of the three check boxes of each row and and then addClass to the table ROW, accordingly

I have this, html:

<tr>
<td>some code, like below</td>
<td id="p01_initiates-p02_served-51" class="p01_initiates-p02_served text-center">
<a onclick="document.myform.SelectedField.value=this.parentNode.cellIndex; document.myform.SelectedID.value='51'; document.myform.submit(); return false;" href="p01_initiates_view.php?SelectedID=51" style="display: block; padding:0px;">
<i class="glyphicon glyphicon-unchecked"></i>
</a>
</td>
<td>some code, like above</td>
</tr>

My jQuery

<script>
\$j(function(){                             
\$j('td.p01_initiates-p02_served').each(function(){
if(\$j('tr').children().children().children().hasClass('glyphicon-unchecked')){
\$j(this).parent().addClass('success');
}
else{
\$j(this).parent().addClass('warning');
})})</script>";

The problem is that it is always adding "success" to each row, regardless of checkbox, ie the condition is being met. (I have checked that I am not mistakenly adding the class to the table, but Im not) Any help, please. TIA

Answer 1

Changes Made to jQuery

• In the first conditional:
  • Reference $(this).find('.glyphicon')
  • and check if it .hasClass('glyphicon-unchecked')
• Follow through with:
  • $(this).parent().addClass('success').removeClass('warning');
• and counter it with:
  • $(this).parent().addClass('warning').removeClass('success');

In the demo there are three rows. The middle row has .glyphicon-check and the first and last row have .glyphicon-unchecked. The colored outlines are just for demonstration purposes. Also I truncated a ridiculous className but it isn't required for you to do so, I just did it for readability.

---

Demo

$('td.p01').each(function() {
  if ($(this).find('.glyphicon').hasClass('glyphicon-unchecked')) {
    $(this).parent().addClass('success').removeClass('warning');
  } else {
    $(this).parent().addClass('warning').removeClass('success');
  }
});

#table {
  border-collapse: separate;
  border-spacing: 10px;
  margin: 20px auto;
  font-size: 20px
}

td * {
  display: block;
  margin: 5px
}

td {
  border: 2px solid black;
  padding: 10px
}

.success {
  outline: 3px dashed lime;
}

.warning {
  outline: 3px dashed tomato;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<table id='table'>
  <tr>
    <td>some code, like below</td>
    <td id="p0151" class="p01 text-center">
      <a href='#/' style="display: block; padding:0px;">
        <i class="glyphicon glyphicon-unchecked"></i>
      </a>
    </td>
    <td>some code, like above</td>
  </tr>
  <tr>
    <td>some code, like below</td>
    <td id="p0152" class="p01 text-center">
      <a href='#/' style="display: block; padding:0px;">
        <i class="glyphicon glyphicon-check"></i>
      </a>
    </td>
    <td>some code, like above</td>
  </tr>
  <tr>
    <td>some code, like below</td>
    <td id="p0153" class="p01 text-center">
      <a href='#/' style="display: block; padding:0px;">
        <i class="glyphicon glyphicon-unchecked"></i>
      </a>
    </td>
    <td>some code, like above</td>
  </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>