jquery using .nextUntil()
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 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 ..
"a .b"
matches all descendent of a which have class b, while
"a.b"
matches all a which have class b.
加载中,请稍侯......
精彩评论