jquery using .nextUntil()_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-16 10:42 出处：网络

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 cl

相关专题：jquery

I tried several things, but none is working, I think I am having some problems with my selecto开发者_如何学编程rs.

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>

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

i think it was works..

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.

$("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.
});

There should be no spaces between tr and the ..