单击一个元素后选择接下来的两个元素.(jquery)

Selecting next two elements after clicking one. (jquery)

本文关键字：元素 两个 jquery 接下来 选择 一个 单击      更新时间：2023-09-26

我有一个这样的表:

<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(); 
    });

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

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

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

http://jsfiddle.net/XEF2v/

如果中间有其他行，可以使用.filter():

过滤它们。
$(this).nextUntil(".clickme").filter(".hidden1, .hidden2").toggle();

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

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