代码之家 › 专栏 › 技术社区 › Amra

jquery使用.nextUntil()

html jquery

Amra · 技术社区 · 16 年前

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

我试了好几种方法,但都不管用,我想我的选择程序有问题。

有人能帮忙吗?

here

我创建的脚本之一是:

<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>

3 回复 | 直到 16 年前

Nick Craver 16 年前

你的代码需要一些柚木,这是:

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

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

这个班是在 <tr> 不在下面就没有空间了。你想从 $(this) <tr> )穿越时,最后 )}; 不正常,应该是 }); 关闭函数然后 .click() 打电话。

Here's the updated/working version

$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});

Test that version here

Richard Sitze 13 年前

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

我想这是个工作。。

kennytm 16 年前

$("tr.top").click(function () {
//   ^
  $('tr.bt').nextUntil('tr:not(.bt)').slideToggle("slow");
//     ^
// And I think you should use $(this) here instead of $('tr.bt')
//  otherwise you cannot toggle the first .bt row,
//  but all the rest will be toggled regardless of which group.
});

中间不应该有空格 tr 以及 .

"a .b"

全部匹配属于 a 哪个有课 b

"a.b"

全部匹配 一 b类 .

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前