javascript - 如何获取在jquery中可见的下一个元素

Question

我有一些元素以及每个元素中的上一个和下一个链接。 就像我点击下一步一样，我只想将一个类添加到下一个可见的 div，我想跳过隐藏的 div，如果 div 是隐藏的，则将类添加到下一个 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>

Answer 1

只需将 'prev'/'next' 更改为 'prevAll'/'nextAll' 和从列表中选择第一项。

换行

$(this).closest('.slide').prevAll('.slide:visible').first().addClass('highZindex');
$(this).closest('.slide').nextAll('.slide:visible').first().addClass('highZindex');

如果你不想循环 prev 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'); 
    }
})