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

Jquery nextUntil()替代

function jquery

Amra · 技术社区 · 15 年前

我有以下代码,是尼克在 previous question 它就像一个梦。

“我正试图生成一个jquery脚本,使类top的表中的所有tr元素都可单击,当类top的一个tr被单击时,类bt的下面的所有tr都将滑动切换,直到有另一个tr类top。”

但我确实需要在一些表中的top和bt类之间添加一个额外的行,这会破坏这些表中的jquery。

我想知道是否有任何修改,我不需要改变表中的代码,它仍然适用于所有应用的网页上的所有表。

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <script type="text/javascript">
  $("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});

  </script>
</head>
<body>
  <table>
    <tr class="top" style="background-color:red">
      <td>Click here to collapse the next tr with class bt but no other</td>
      <td>top row 1</td>
      <td>top row 1</td>
    </tr>
    <tr class="other">
      <td colspan="3">This is not ment to collapse when the tr at the top is clicked</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" style="background-color:red">
      <td>Click here to collapse the next tr with class bt</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>
    <tr class="top" style="background-color:red">
      <td>Click here to collapse the next tr with class bt</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>âââââ

你可以在这里看到 EXAMPLE

2 回复 | 直到 9 年前

Jack 15 年前

如果不是 .bt

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

(有效,已经尝试过)

Yi Jiang G-Man 15 年前

$(this).nextAll('.bt:first').prev().nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });

见: http://jsbin.com/ateze5/9

推荐文章

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

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前