jquery選擇相鄰若干兄弟元素
阿新 • • 發佈:2018-12-26
實現點選是顯示錶格,再次點選隱藏類名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>