jquery选择相邻若⼲兄弟元素实现点击是显⽰表格,再次点击隐藏类名father下的son.对相邻的兄弟元素son没有影响。
html代码:
<table class="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();
jquery在一个元素后追加标签}else{
return false;
}
});
})
});
</script>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。