Question

我正在尝试生成一个jquery脚本，使得一个表格中的所有tr元素都可以使用类顶部来表示，当一个tr类与top一起点击下面的所有tr时，使用类bt，直到有另一个tr类顶部将slideToggle。

我尝试了几件事，但没有一件事有效，我认为我的选择器存在一些问题。

有人可以帮忙吗？

提前致谢。

另见示例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>

Answer 1

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

我认为这是有效的..

Answer 2

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

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

应该是这样的：

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

班级 on <tr>不在下面，所以没有空间。您希望在遍历时以$(this)（点击的<tr>）开头，并且最后一个)};无序，应该});关闭该函数然后.click() 1}}来电。

Here's the updated/working version，请记住幻灯片切换表行变得混乱，您可能想要淡化切换，如下所示：

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

Test that version here

Answer 3

$("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"

匹配具有类a的所有b。

jquery使用.nextUntil（）

3 个答案: