jquery - 在表中查找元素并根据结果更改其他元素

Question

我正在尝试在 stackoverflow 上调整其他具有类似问题的示例......但现在我很难过。

这是我的 html 表格在渲染后的样子：

<table class="table table-striped" id="status">
  <thead>
    <tr>
          <th>Name</th>
           <th>REP</th>
           <th>Package</th>
           <th> CV</th>
           <th>Latest CV</th>
           <th>Custom </th>
           <th>Status</th>    
    </tr>
  </thead>
  <tbody>     
    <tr>
        <td>asfasdf</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="package">tmm</td>
        <td>tmm-4.2.7-r1</td>
        <td>4.2.7-r1</td>
        <td>&nbsp;</td>
        <td class="status_button"><button type="button" class="btn btn-success"></button></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="package">a-cis</td>
        <td>a-cis-0.1.0-r0</td>
        <td>0.1.0-r0</td>
        <td>&nbsp;</td>
        <td class="status_button"><button type="button" class="btn btn-danger"></button></td>
    </tr>    
    </tbody>
  </table>

我需要什么：

表格呈现后，我想找到所有具有危险按钮（“btn-danger”）的行，并将“包”单元格/td 中的文本颜色更改为红色。

基于 stackoverflow 上的类似问题，这是我目前所拥有的：

122 <script>
123 $( document ).ready(function() {
124         $('.status_button').each(function(i, n) {
125                 console.log($(n.innerHTML));
126                 //somehow id the sibling <td> that has class
127                 //package and change the font color
128                 //to red
129         });
130 });
131 
132 </script>

console.log 匹配对象中的属性并显示...但我的“if”语句失败。 我试图将 console.log 的内容复制到此处粘贴，但尚未成功。

任何关于我如何测试按钮类的值然后更改 Package 字段中的文本颜色的提示将不胜感激

谢谢。

编辑 1

所以我改变了 each 函数来寻找 btn-danger 类......这似乎工作得更好，因为它过滤了更多的结果。 但我想我仍然需要帮助更改带有“包”类的兄弟 td 以显示红色文本。

122 <script>
123 $( document ).ready(function() {
124         $('.btn-danger').each(function(i, n) {
125                 console.log($(n.innerHTML));
126                 if ($(n.innerHTML) == "button.btn.btn-danger") {
127                         alert('red!!');
128                 };
129         });
130 });
131 
132 </script>

Answer 1

您可以使用:has 选择器过滤所有具有您要查找的按钮的类 status_button 的单元格。

要使用类包更改单元格的颜色，您可以使用siblings。

sn-p：

$(function () {
  $('.status_button:has("button.btn.btn-danger")').each(function(index, element) {
    $(element).siblings('.package').css('color', 'red');
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table class="table table-striped" id="status">
    <thead>
    <tr>
        <th>Name</th>
        <th>REP</th>
        <th>Package</th>
        <th> CV</th>
        <th>Latest CV</th>
        <th>Custom</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>asfasdf</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="package">tmm</td>
        <td>tmm-4.2.7-r1</td>
        <td>4.2.7-r1</td>
        <td>&nbsp;</td>
        <td class="status_button">
            <button type="button" class="btn btn-success"></button>
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="package">a-cis</td>
        <td>a-cis-0.1.0-r0</td>
        <td>0.1.0-r0</td>
        <td>&nbsp;</td>
        <td class="status_button">
            <button type="button" class="btn btn-danger"></button>
        </td>
    </tr>
    </tbody>
</table>

Answer 2

如果您想使用 jQuery，请改为搜索 .btn-danger。它更简单，完全符合您的要求。

 $(document).ready(function() {
   $('.btn-danger').each(function(i, n) {
     var thisRow = n.closest('tr');
     $(thisRow).css("color", "red");
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="status">
  <thead>
    <tr>
      <th>Name</th>
      <th>REP</th>
      <th>Package</th>
      <th> CV</th>
      <th>Latest CV</th>
      <th>Custom </th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>asfasdf</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="package">tmm</td>
      <td>tmm-4.2.7-r1</td>
      <td>4.2.7-r1</td>
      <td>&nbsp;</td>
      <td class="status_button">
        <button type="button" class="btn btn-success"></button>
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class="package">a-cis</td>
      <td>a-cis-0.1.0-r0</td>
      <td>0.1.0-r0</td>
      <td>&nbsp;</td>
      <td class="status_button">
        <button type="button" class="btn btn-danger"></button>
      </td>
    </tr>
  </tbody>
</table>