将 TR 的所有下一个兄弟姐妹切换到下一个 TR 没有类

toggle all the next siblings of tr upto next tr not having a class

本文关键字:下一个 TR 兄弟姐妹      更新时间:2023-09-26

我有这样的表格

<table>
<tr class="a"></tr>
<tr class="a b"></tr>
<tr class="a b"></tr>
<tr class="a b"></tr>
<tr class="a"></tr>
<tr class="a b"></tr>
<tr class="a b"></tr>
<tr class="a b"></tr>
</table>

现在我希望如果我单击仅带有类"a"的<tr>,它的兄弟姐妹会隐藏,直到它找到下一个只有类"a"。

因此,如果我单击第一个<tr>那么接下来的 3 <tr>也带有类"b"应该隐藏或显示(切换(不是下个<tr>只有"A"类

之后的<tr>

:not()选择器可用于排除点击事件.b。 在单击事件中,同一选择器可以与nextUntil函数结合使用。

不过,在您使 html 有效之前,通过添加<td></td>标签,我不确定任何事情都会起作用。

$(".a:not('.b')").click(function(){
   $(this).nextUntil(".a:not('.b')").hide();
});

工作示例:http://jsfiddle.net/sCdHg/

尝试

$("tr.a:not(.b)").click(function(){
  $(this).nextUntil(".a:not(.b)").hide()
});

试试这个,

$("tr.a").click(function(){
  $(this).siblings("tr.a.b").hide()
});
$('tr.a').not('.b').click(function() {
    $(this).nextUntil('tr.a.b').toggle();
});