如何在jquery nextUntil中每隔一秒选择一个元素

Question

在使用jquery的.nextUntil()方法后，我尝试每隔一秒选择一个元素。如何在选择器元素之后每隔一秒选择一个元素？

我已经尝试过使用.nextUntil(".headerRow", "tr:odd")和.nextUntil(".headerRow", "tr:nth-child(odd)")

这是我想要工作的代码行：

$('.headerRow').nextUntil(".headerRow", "tr:nth-child(odd)").css("background-color", "rgb(240,240,240)");

它每秒钟选择一个tr。。。然而，它根据整个表而不是最后一个.headerRow来选择行

它看起来像：

<tr> - (not selected)
<tr> - (not selected)
<tr> - (not selected)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
<tr class="headerRow"> - (not selected)
<tr> - (not selected) <----- should be selected
<tr> - (selected) <------ shouldn't be selected
<tr> - (not selected) <----- should be selected
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
...

它应该像这样开始选择<tr>：

<tr> - (not selected, ok)
<tr> - (not selected, ok)
<tr> - (not selected, ok)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
<tr> - (selected)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
...

我该怎么解决这个问题？

编辑：表格生成如下：

<table id="bomTable" class="hover">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<c:forEach items="${list.listItems}" var="item">
<tr <c:if test="${item.rowType == 'HEADLINE'}">class="headerRow"</c:if>>
<td>${item.materialNumber}</td>
<td>${item.materialDescription}</td>
<td>${item.quantity}</td>
<td>${item.unit}</td>
</tr>
</c:forEach>
</tbody>
</table>

Answer 1

遗憾的是，仅使用:odd, :even无法实现，因为赔率和偶数是对其绝对顺序的引用。

因此，在应用赔率和赔率之前，您首先需要分组，作为回报，该分组将成为相对
这里有一个使用.each():的例子

$('.headerRow').each(function() {
$(this).nextUntil('.headerRow', 'tr:even').css('background', 'red');
});

<table>
<tr><td>no</td></tr>
<tr><td>no</td></tr>
<tr><td>no</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
<tr><td>sel</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
</table>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

$(this).nextUntil('.headerRow')是我们的可迭代群。