我有一些元素以及每个元素中的上一个和下一个链接。 好像我点击下一步我想要只向下一个可见的div添加一个类,我想跳过隐藏的div,如果div被隐藏,则将class添加到隐藏元素后可见的下一个div。因为我写了这样的东西
$('.next').click(function(){
$('.slide').removeClass('highZindex');
$(this).closest('.slide').next('.slide:visible').addClass('highZindex')
})
我只想从所有这些元素中删除添加的类,只需要添加到下一个可见元素但是发生的事情是如果单击下一个链接并且如果下一个div被隐藏它会跳过所有元素并直接转到最后div和class也没有添加到任何元素。
$('.slide').first().addClass('highZindex');
$('.prev').click(function(){
$('.slide').removeClass('highZindex');
$(this).closest('.slide').prev('.slide:visible').addClass('highZindex')
})
$('.next').click(function(){
$('.slide').removeClass('highZindex');
$(this).closest('.slide').next('.slide:visible').addClass('highZindex')
})
.slide {border:1px solid; height:200px; width:200px;position:absolute;top:0px; left:0px; background-color:#fff; }
.highZindex {z-index:1000}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slide">1 <a href="#" class="prev">prev</a> <a href="#" class="next">next</a></div>
<div class="slide">2 <a href="#" class="prev">prev</a> <a href="#" class="next">next</a></div>
<div class="slide">3 <a href="#" class="prev">prev</a> <a href="#" class="next">next</a></div>
<div class="slide" style="display:none;">4 <a href="#" class="prev">prev</a> <a href="#" class="next">.next</a></div>
<div class="slide">5 <a href="#" class="prev">prev</a> <a href="#" class="next">next</a></div>
<div class="slide">6 <a href="#" class="prev">prev</a> <a href="#" class="next">next</a></div>
<div class="slide">7 <a href="#" class="prev">prev</a> <a href="#" class="next">next</a></div>
答案 0 :(得分:3)
只需更改&#39; 上一页&#39; /&#39; 下一步&#39;到&#39; prevAll &#39; /&#39; nextAll &#39; 从列表中选择第一项。
更改了行
$(this).closest('.slide').prevAll('.slide:visible').first().addClass('highZindex');
$(this).closest('.slide').nextAll('.slide:visible').first().addClass('highZindex');
如果您不想循环上传btn,可以添加条件:
$('.prev').click(function(){
if(!($(this).closest('.slide').prevAll('.slide:visible').length == 0)) {
$('.slide').removeClass('highZindex');
$(this).closest('.slide').prevAll('.slide:visible').first().addClass('highZindex');
}
})