1. 程式人生 > >jquery選擇相鄰若干兄弟元素

jquery選擇相鄰若干兄弟元素

實現點選是顯示錶格,再次點選隱藏類名father下的son.對相鄰的兄弟元素son沒有影響。

html程式碼:

<tableclass="table">

<thead>

<tr>

<th>名稱</th>

<th>城市</th>

</tr>

</thead>

<tbody>

<tr class="father">

<td>Tanmay</td>

<td>Bangalore</td>

</tr>

<tr class="son"

>

<td>Sachin</td>

<td>Mumbai</td>

</tr>

<tr class="son">

<td>Sachin</td>

<td>Mumbai</td>

</tr>

<tr class="son">

<td>Sachin</td>

<td>Mumbai</td>

</tr>

<tr class="father">

<td>Tanmay</td>

<td>Bangalore</td>

</tr>

<tr class="son">

<td>Sachin</td>

<td>Mumbai</td>

</tr>

</tbody>

</table>

思路:即選擇兩個father之間的兄弟元素,先選擇到點選事件的father的所有兄弟元素,然後利用迴圈函式each()逐個迴圈匹配,遇到father,跳出迴圈。

<script>

                $(document).ready(function() {
                    $('.father').click(function(){
                        var e = $(this).nextAll();     
                       e.each(function(index, el) {
                           if(
                            $(this).attr("class")=='son'){
                             $(this).slideToggle();
                           }else{
                            return false;
                           }
                       });
                    })
                });
                    
                </script>