在子元素 (jquery) 中识别 class

Question

我有一个 table，它实际上是一个数据库转储，每行有 3 个 bootstrap gylphicons 代表 check/unchecked 个复选框

我想使用jquery检查每行三个复选框中第二个出现的是哪个gylphicon，然后将Class添加到table行，相应地

我有这个，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>";

问题是它总是向每一行添加 "success"，而不管复选框，即满足条件。（我检查过我没有错误地将 class 添加到 table，但我没有）任何帮助，请。 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。彩色轮廓仅用于演示目的。我还截断了一个荒谬的类名，但你不需要这样做，我这样做只是为了便于阅读。

演示

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

在子元素 (jquery) 中识别 class

Identify class in child element (jquery)

jquery

children

conditional-statements

glyphicons

对 jQuery

演示