2010-10-15 82 views
0

我有下面的代码它是由尼克在previous question提供,它的工作就像一个梦。Jquery nextUntil()替代

我试图

“我想产生一个jquery脚本,使表中的所有TR元素与一流的顶级clickeable当带班顶一个TR单击下面的所有TR带班BT,直到有是另一个tr类顶部将slideToggle。“

但我确实必须在top和bt类之间添加一些额外的行,并在那些表中打破jquery。

我不知道是否有任何修改,我不需要更改表中的代码,它仍然适用于所有应用的网页上的所有表。

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

您可以在这里看到EXAMPLE

回答

2

就跳过第一,如果它是不是.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" }); 
}); 

(它的工作原理已经尝试过)

+0

谢谢,我可以看到它也可以工作,我也喜欢,因为我可以看到不同的方法,谢谢。 + 1 :-) – Amra 2010-10-15 15:40:09

1

嗯,这是略显凌乱,但我认为这应该做的工作:

$(this).nextAll('.bt:first').prev().nextUntil('tr:not(.bt)').animate({ opacity: "toggle" }); 

参见:​​

+0

@Yi Jiang:谢谢,还没有试过,但是+1已经是第一个,而且这个例子似乎正在工作。 – Amra 2010-10-15 15:33:09

+0

@Cesar将'first()'移到'nextAll'选择器中,现在应该稍微凌乱 – 2010-10-15 15:34:18

+0

@Yi Jiang:无论哪种方式。非常感谢。 :-) – Amra 2010-10-15 15:39:05