jQuery使用.nextUntil（）

本文介绍了jQuery使用.nextUntil（）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图生成一个jquery脚本，用类顶部clickeable从一个表中创建所有tr元素，当一个tr顶级类型被点击下面的所有tr类bt时，直到有另一个tr类顶部将slideToggle。 p>

我尝试了几件事情，但都没有工作，我认为我在选择器中遇到了一些问题。

任何人的帮助？

预先感谢。

另请参阅示例，请记住幻灯片切换表格行变得杂乱，你可能想淡化切换，而不是像这样：

<$ （）{
$（this）.nextUntil（'tr：not（.bt）'）。animate（{ opacity：toggle}）;
}）;

。

I am trying to generate a jquery script to make all tr elements from a table with class top clickeable and when one tr with class top is clicked all tr below with class bt until there is another tr class top will slideToggle.

I tried several things, but none is working, I think I am having some problems with my selectors.

Could anybody help?

Thanks in advance.

Also see example here

One of the scripts I created is:

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

解决方案

Your code needs a few teaks, this:

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

Should be this:

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

The class is on the <tr> not beneath is so no space there. You want to start with $(this) (the clicked <tr>) when traversing, and the last )}; is out of order, it should be }); closing the function then then .click() call.

Here's the updated/working version, keep in mind slide toggling table rows gets messy, you may want to fade toggle instead, like this:

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

Test that version here.

这篇关于jQuery使用.nextUntil（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！