识别子元素中的类（jQuery）

Question

我有一个表，实际上是一个数据库转储，每行具有3个引导gylphicons来表示选中/未选中的复选框

我想使用jquery来检查每行三个复选框中的第二个中存在哪个gylphicon，然后相应地将Class添加到表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>";

问题在于，无论复选框是什么，即始终满足条件，它总是向每行添加“成功”。 （我检查过我没有错误地将类添加到表中，但是我没有） 请帮忙。 TIA

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>