使用.nextUntil（）的jquery_Jquery_Html

使用.nextUntil（）的jquery

jquery html

使用.nextUntil（）的jquery,jquery,html,Jquery,Html,我正在尝试生成一个jquery脚本，以使具有类top的表中的所有tr元素都可单击，并且当单击具有类top的一个tr时，具有类bt的所有tr都将位于下面，直到有另一个tr类top将滑动切换我尝试了几种方法，但都不起作用，我想我的选择器出现了一些问题有人能帮忙吗提前谢谢另请参见示例我创建的脚本之一是： <html> <head> <script type="text/javascript"> $("tr .top").click(function ()

我正在尝试生成一个jquery脚本，以使具有类top的表中的所有tr元素都可单击，并且当单击具有类top的一个tr时，具有类bt的所有tr都将位于下面，直到有另一个tr类top将滑动切换

我尝试了几种方法，但都不起作用，我想我的选择器出现了一些问题

有人能帮忙吗

提前谢谢

另请参见示例

我创建的脚本之一是：

<html>
<head>
<script type="text/javascript">
$("tr .top").click(function () {
  $('tr .bt').nextUntil('tr:not(.bt)').slideToggle("slow");
  )};
</script>
</head>
<body>
 <table>
    <tr class="top">
      <td>top row 1</td>
      <td>top row 1</td>
      <td>top row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
    <tr class="top">
      <td>top row 2</td>
      <td>top row 2</td>
      <td>top row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 2</td>
      <td>bt row 2</td>
      <td>bt row 2</td>
    </tr>
    <tr class="bt">
      <td>bt row 1</td>
      <td>bt row 1</td>
      <td>bt row 1</td>
    </tr>
  </table>
</body>
</html>


$（“tr.top”）。单击（函数（）{
$（'tr.bt'）.nextUntil（'tr:not（.bt'））.slideToggle（“slow”）；
)};
第一排
第一排
第一排
英国电信第1行
英国电信第1行
英国电信第1行
英国电信第1行
英国电信第1行
英国电信第1行
英国电信第1行
英国电信第1行
英国电信第1行
第一排2
第一排2
第一排2
英国电信第2排
英国电信第2排
英国电信第2排
英国电信第1行
英国电信第1行
英国电信第1行

您的代码需要一些柚木，这：

$("tr .top").click(function () {
  $('tr .bt').nextUntil('tr:not(.bt)').slideToggle("slow");
  )};

应该是这样的：

$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').slideToggle("slow");
});

该类位于

的下方，因此没有空间。您希望在遍历时从

$（this）

（单击的

）开始，最后一个

）}出现故障，应该是}）关闭函数，然后。单击（）
调用
，请记住，滑动切换表行会变得混乱，您可能需要淡入淡出切换，如下所示：
$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});

.
您的代码需要一些柚木，这：
$("tr .top").click(function () {
  $('tr .bt').nextUntil('tr:not(.bt)').slideToggle("slow");
  )};

应该是这样的：
$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').slideToggle("slow");
});

该类位于
的下方，因此没有空间。您希望在遍历时从$（this）
（单击的
）开始，最后一个）}出现故障，应该是}）关闭函数，然后。单击（）
调用
，请记住，滑动切换表行会变得混乱，您可能需要淡入淡出切换，如下所示：
$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});


tr
和
之间应该没有空格
"a .b"

匹配具有类b
的a
的所有后代，而
"a.b"

匹配所有具有类b
的a

 $("tr .top").click(function () {
  $('tr .bt').nextUntil('tr .top').slideToggle("slow");
  )};

tr
和
之间应该没有空格
"a .b"

匹配具有类b
的a
的所有后代，而
"a.b"

匹配所有具有类b
的a

 $("tr .top").click(function () {
  $('tr .bt').nextUntil('tr .top').slideToggle("slow");
  )};

我认为这是个好主意
我觉得它很管用。
谢谢它管用！您还可以告诉我为什么在Chrome中，当我单击顶行时会添加一个额外的行吗？再次感谢。@Cesar-这里没有这样做，尽管当您.slideToggle（）
时动画将关闭，因为表是如何呈现的。。。添加了一个褪色的替代品。感谢它的工作！您还可以告诉我为什么在Chrome中，当我单击顶行时会添加一个额外的行吗？再次感谢。@Cesar-这里没有这样做，尽管当您.slideToggle（）
时动画将关闭，因为表是如何呈现的。。。为此添加了淡入淡出选项。这仍然不会产生切换本地“子”行所需的效果…这将打开/关闭所有“子”行，而不是给定的。top
parent:）这仍然不会产生切换本地“子”行所需的效果…这将打开/关闭所有“子”行，与给定的.top
父项的相反：）