Question

我正在尝试使用jQuery向td添加一个类，它是具有指定内容的th的行的一部分。这是我正在使用的表格：

HTML

<table id="lastPeriodComparison">
  <tbody>
    <tr>
      <th></th>
      <th class="right">Users</th>
      <th class="right">Page Views</th>
      <th class="right">Sessions</th>
      <th class="right">Page Views per Session</th>
      <th class="right">Average Session Duration</th>
    </tr>
    <tr>
      <th scope="row">Previous Period</th>
      <td class="right">6672</td>
      <td class="right">47810</td>
      <td class="right">9208</td>
      <td class="right">5.192</td>
      <td class="right">0:03:25</td>
    </tr>
    <tr>
      <th scope="row">This Period</th>
      <td class="right">7401</td>
      <td class="right">48796</td>
      <td class="right">10414</td>
      <td class="right">4.686</td>
      <td class="right">0:03:18</td>
    </tr>
    <tr>
      <th scope="row">Change</th>
      <td class="right">729</td>
      <td class="right">986</td>
      <td class="right">1206</td>
      <td class="right">-0.507</td>
      <td class="right">-0:00:07</td></tr>
    <tr>
    <th scope="row">Percent Change</th>
      <td class="right">10.93%</td>
      <td class="right">2.06%</td>
      <td class="right">13.10%</td><td class="right">-9.76%</td>
      <td class="right">-3.40%
      </td>
    </tr>
  </tbody>
</table>

我在jQuery中有以下内容，它正确地选择了th的行范围，其中包含Change，并应用了一个类：

的jQuery

$('th[scope="row"]:contains("Change")').addClass('negcheck');

我需要做的是将该类应用于行中的td，以最后两行结束以下HTML：

HTML

    <tr>
      <th scope="row">Change</th>
      <td class="right negcheck">729</td>
      <td class="right negcheck">986</td>
      <td class="right negcheck">1206</td>
      <td class="right negcheck">-0.507</td>
      <td class="right negcheck">-0:00:07</td></tr>
    <tr>
    <th scope="row">Percent Change</th>
      <td class="right negcheck">10.93%</td>
      <td class="right negcheck">2.06%</td>
      <td class="right negcheck">13.10%</td>
      <td class="right negcheck">-9.76%</td>
      <td class="right negcheck">-3.40%
      </td>
    </tr>

最终我将使用jQuery来检查td.negcheck的内容，并根据内容是正面还是负面来对它们进行不同的样式设置。

非常感谢 - 我相信这很简单，但我无法解决。

Answer 1

试试此代码

 $("tr th:contains('Change')").each(function(){
                    $(this).parent('tr').children('td').addClass('negcheck');
    });

OR

$('th[scope="row"]:contains("Change")').parent('tr').children('td').addClass('negcheck');

请查看此示例

$(document).ready(function(){
$('th[scope="row"]:contains("Change")').parent('tr').children('td').addClass('negcheck');  
});

.negcheck {
  color: green;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="lastPeriodComparison">
  <tbody>
    <tr>
      <th></th>
      <th class="right">Users</th>
      <th class="right">Page Views</th>
      <th class="right">Sessions</th>
      <th class="right">Page Views per Session</th>
      <th class="right">Average Session Duration</th>
    </tr>
    <tr>
      <th scope="row">Previous Period</th>
      <td class="right">6672</td>
      <td class="right">47810</td>
      <td class="right">9208</td>
      <td class="right">5.192</td>
      <td class="right">0:03:25</td>
    </tr>
    <tr>
      <th scope="row">This Period</th>
      <td class="right">7401</td>
      <td class="right">48796</td>
      <td class="right">10414</td>
      <td class="right">4.686</td>
      <td class="right">0:03:18</td>
    </tr>
    <tr>
      <th scope="row">Change</th>
      <td class="right">729</td>
      <td class="right">986</td>
      <td class="right">1206</td>
      <td class="right">-0.507</td>
      <td class="right">-0:00:07</td></tr>
    <tr>
    <th scope="row">Percent Change</th>
      <td class="right">10.93%</td>
      <td class="right">2.06%</td>
      <td class="right">13.10%</td>
      <td class="right">-9.76%</td>
      <td class="right">-3.40%</td>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用.filter()：

$('th:contains(Change)").parent().find('.right').filter(function(){
    return this.textContent.trim().indexOf('-') === 0;
}).addClass('negcheck');

选择与指定内容

2 个答案: