jquery - CSS nth-child 没有返回预期的结果

Question

我正在尝试动态创建一个表。并相应地更新单元格值。这些值是异步返回的，因此理论上它们可以引用任何列。列数可以根据情况随时不同，但表的这一部分的行数是常量 (7)。

td {
  border: 1px solid black;
}

.dummyTable td.components:nth-child(5n+2) {
    color: red;
}

<table class="dummyTable" style="display: table;">

<tbody>
<tr>

<th style="background-color:#898b8c; color:white">A</th>
<th style="background-color:#898b8c; color:white">B</th>
<th style="background-color:#898b8c; color:white">C</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">37</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">38</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">36</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">39</th>
<th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">40</th>
</tr>

<tr>
      <td rowspan="3">A</td>
      <td>B</td>
      <td>C</td>

      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #fff082 ">1</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
</tr>

<tr>
      <td>B</td>
      <td>C</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
      <td style="background-color: #4fefa4 ">0</td>
</tr>
<tr>
      <td></td>
      <td style="background-color:#d5e7ed;">Total</td>
      <td id="37" style="background-color:#d5e7ed">0</td>
      <td id="38" style="background-color:#d5e7ed">1</td>
      <td id="36" style="background-color:#d5e7ed">0</td>
      <td id="39" style="background-color:#d5e7ed">0</td>
      <td id="40" style="background-color:#d5e7ed">0</td>
</tr>

<tr>
      <td rowspan="7">S</td>
      <td rowspan="7">E</td>

      <td>s1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">2</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
</tr>
<tr>
      <td>s2</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
</tr>
<tr>
      <td>s3</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">3</td>
      <td class="components" style="background-color:#fff082">3</td>
      <td class="components" style="background-color:#fff082">4</td>
</tr>
    <tr>
      <td>s4</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s5</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s6</td>

      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
    <tr>
      <td>s7</td>
      <td class="components" style="background-color:#fff082">1</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
      <td class="components" style="background-color:#4fefa4">0</td>
    </tr>
  </tbody>
</table>

我正在尝试一次更新第 n 个 child 的列。我的想法是，我只需要知道表中有多少列以及我当时正在处理哪一列。

例如，如果有 5 列，n 将是 5，我认为常量将修改我正在谈论的列。

即5n+1 应该更新 5 列表的第 1 列。 3n+2 应该修改 3 列表的第 2 列。

我指的是具有“组件”类的列。

我认为我遇到的问题是我不确定“组件”单元格的索引方式。即，它们是逐行还是逐列。

我在考虑数学中的第 n 项公式:

因此，如果在这种情况下公式为 5n+0:

我想象第一个突出显示的单元格是 5: 5(1) + 0 = 5 那么下一个突出显示的单元格索引将是 10:5(2) + 0 = 10

我也不确定它们是从零索引还是从 1 开始。

除第一行外，此过程对每一行都适用。但是当我在代码片段中进行测试时，它似乎并没有完全按照我的预期移动。

(注意)我修改了示例以获取原始返回表的一部分并且代码是在 CSS 而不是 jQuery 中，而不是修改值我在这里更改颜色。这是为了简单起见，因为我认为这不会影响逻辑。

Answer 1

“总计”之后的第一行没有按预期工作，因为该行有七列。 td.components:nth-child(5n+2) 只会将其样式应用于第二个 child (如果该 child 匹配 td.components)，然后每隔 5 个 child 应用一次第二个，前提是每第 5 个 child 也匹配 td.components。

但是，它仍会计算 其他 child 。在第一行中，您有两个 rowspan="7" 列。所以它计算这两个，不将样式应用于第二列，因为它没有 .components 类，然后计算 5 列，并将样式应用于该列，因为它确实有类.components。

在接下来的行中，至少在标记中，每行只有 6 列，因此每行的第 2 列应用样式，因为每行的第 2 列具有类 .components.

因此，如果您不希望前两列被计算在内，您需要将它们放在自己的行中或使用一些不同的逻辑，例如集成 :not() 选择器或其他东西。

或者，如果您想使用 jQuery 来应用这些样式，您可以这样做，只需告诉循环忽略总计行之后的第一行并将特定样式应用到该行即可。