2010-10-15 80 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