jQuery nextUntil()替代 [英] Jquery nextUntil() alternative
问题描述
我有尼克(Nick)在上一个问题中提供的以下代码，它的工作方式类似于一个梦想.
I have the following code which it was provided by Nick in a previous question and it work like a dream.
我正在尝试
我正在尝试生成一个jquery脚本，以使具有top top类的表中的所有tr元素都可单击，并且当单击具有top top类的一个tr时，将所有具有bt类的tr都单击到下面，直到另一个tr class top将滑动.
"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."
但是我确实必须在某些表的top和bt类之间添加一个额外的行，这会破坏这些表中的jquery.
But I did have to add an extra row in between top and bt class in some tables, and that break the jquery in those tables.
我想知道是否需要进行任何修改，而不需要更改表中的代码，并且该修改对于所有应用的网页上的所有表仍然有效.
I wonder if there is any modification where I dont need to change the code in the tables and it would still work for all the table on all web pages applied.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$("tr.top").click(function () {
$(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});
</script>
</head>
<body>
<table>
<tr class="top" style="background-color:red">
<td>Click here to collapse the next tr with class bt but no other</td>
<td>top row 1</td>
<td>top row 1</td>
</tr>
<tr class="other">
<td colspan="3">This is not ment to collapse when the tr at the top is clicked</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" style="background-color:red">
<td>Click here to collapse the next tr with class bt</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>
<tr class="top" style="background-color:red">
<td>Click here to collapse the next tr with class bt</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>
您可以在此处看到示例
推荐答案
如果不是.bt，请先跳过:
$("tr.top").click(function () {
if (!$(this).next().hasClass('bt'))
$(this).next().nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
else
$(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});
(有效，已经尝试过)
这篇关于jQuery nextUntil()替代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
