Определить класс в дочернем элементе (jquery)

Question

У меня есть таблица, которая, по сути, является дампом БД, с 3-мя загрузочными гильфиконами на строку для представления флажков, отмеченных / не отмеченных

Я хочу использовать jquery, чтобы проверить, какой gylphicon присутствует во втором из трех флажков каждой строки, а затем добавить addClass в таблицу ROW, соответственно

У меня есть это, 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>

Мой 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>";

Проблема в том, что он всегда добавляет «успех» к каждой строке, независимо от флажка, то есть выполняется условие. (Я проверил, что я не ошибочно добавляю класс в таблицу, но я не) Любая помощь, пожалуйста. ТИА

Answer 1

Изменения, внесенные в jQuery

• В первом условном:
  • Ссылка $(this).find('.glyphicon')
  • и проверьте, если .hasClass('glyphicon-unchecked')
• Выполнить с помощью:
  • $(this).parent().addClass('success').removeClass('warning');
• и противостоять ему:
  • $(this).parent().addClass('warning').removeClass('success');

В демоверсии есть три ряда. Средний ряд имеет .glyphicon-check, а первый и последний ряд имеют .glyphicon-unchecked. Цветные контуры только для демонстрационных целей. Также я обрезал нелепое className, но вы не обязаны это делать, я просто сделал это для удобства чтения.

---

Демо

$('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>