Question

我有以下代码，它是由Nick在previous question中提供的，它就像一个梦想。

我在尝试什么

“我正在尝试生成一个jquery脚本，以便使用类顶部的表格中的所有tr元素进行拼写，并且当使用类bt单击下面的一个tr时，直到有另一个tr类顶部将slideToggle。”

但是我确实必须在某些表的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

Answer 1

如果它不是.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" });
});

（它有效，已经尝试过）

Answer 2

嗯，它有点凌乱，但我认为这应该做的工作：

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

请参阅：http://jsbin.com/ateze5/9

Jquery nextUntil（）替代

2 个答案: