jQuery使用.nextUntil（） [英] jquery using .nextUntil()
问题描述
我试图生成一个jquery脚本，用类顶部clickeable从一个表中创建所有tr元素，当一个tr顶级类型被点击下面的所有tr类bt时，直到有另一个tr类顶部将slideToggle。 p>
我尝试了几件事情，但都没有工作，我认为我在选择器中遇到了一些问题。
任何人的帮助？
预先感谢。
另请参阅示例 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>顶行1< / td>
< td>顶行1< / td>
< td>顶行1< / td>
< / tr>
< tr class =bt>
< td> bt第1行< / td>
< td> bt第1行< / td>
< td> bt第1行< / td>
< / tr>
< tr class =bt>
< td> bt第1行< / td>
< td> bt第1行< / td>
< td> bt第1行< / td>
< / tr>
< tr class =bt>
< td> bt第1行< / td>
< td> bt第1行< / td>
< td> bt第1行< / td>
< / tr>
< tr class =top>
< td>顶行2< / td>
< td>顶行2< / td>
< td>顶行2< / td>
< / tr>
< tr class =bt>
< td> bt第2行< / td>
< td> bt第2行< / td>
< td> bt第2行< / td>
< / tr>
< tr class =bt>
< td> bt第1行< / td>
< td> bt第1行< / td>
< td> bt第1行< / td>
< / tr>
< / table>
< / body>
< / html>
您的代码需要几个柚木，点击（功能（）{
$（'tr .bt'）。）（
$（tr .top）。 nextUntil（'tr：not（.bt）'）。slideToggle（slow）;
）};
应该是这样的：
$（tr.top）。click（function（）{
$（this）.nextUntil（'tr：not（.bt）'）。slideToggle（slow） ;
}）;
类 < tr> ; 不在下面，所以没有空间。您希望在遍历时以 $（this）（点击< tr> >>）开头， code>）}; 无序，应该是}）; 关闭函数，然后 .click（） call。
这里是更新/工作版本，请记住幻灯片切换表格行变得杂乱，你可能想淡化切换，而不是像这样：
<$ （）{
$（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" });
});
这篇关于jQuery使用.nextUntil（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
