javascript - 单击一个后选择接下来的两个元素。（jQuery）

Question

我有一张这样的桌子：

<table>
<tbody>
<tr class='clickme'>
<td>...</td>
</tr>
<tr class='hidden1'>
<td>...</td>
</tr>
<tr class='hidden2'>
<td>...</td>
</tr>
<tr class='clickme'>
<td>...</td>
</tr>
<tr class='hidden1'>
<td>...</td>
</tr>
<tr class='hidden2'>
<td>...</td>
</tr>
[etc.]
</tbody>
</table>

.hidden1 和 .hidden2 是 display: none。我的目标是单击 clickme 并显示接下来的两个，但仅显示这两个，并且仅显示我单击的 clickme“下方”的那些。

我试过最接近：

$('.clickme').click(function (e) {
    $(this).closest('.hidden1').remove();
    $(this).closest('.hidden2').remove();
});

没有反应。多种不同的东西。我尝试了中等成功的兄弟姐妹，但它只显示了整个表中的第一个匹配项。该表可能有 100 个这样的对。

$('.clickme').click(function (e) {
        $(this).siblings(".hidden1:first").toggle(); 
        $(this).siblings(".hidden2:first").toggle(); 
    });

我被难住了，我觉得这是一个简单的解决方案！

Answer 1

对于您的标记，它很容易使用.nextUntil()：

$(".clickme").click(function() {
    $(this).nextUntil(".clickme").toggle();
});

演示：http: //jsfiddle.net/XEF2v/

如果中间可能有其他行，您可以使用以下方式过滤它们.filter()：

$(this).nextUntil(".clickme").filter(".hidden1, .hidden2").toggle();

Answer 2

如果您在以下之前有其他不想选择的元素，".clickme"因此无法使用 VisioN 的解决方案，您可以：

$('.clickme').click(function (e) {
    $(this).nextAll(".hide1").eq(0).toggle(); 
    $(this).nextAll(".hide2").eq(0).toggle(); 
});