how to get next element that is visible in jquery

Question

i have a some elements and previous and next links in each of those elements. As if i click on next i want to add a class only to the next div which is visible and i want to skip the divs which are hidden and if div is hidden add class to next div which is visible after hidden element. for that i written something like this

$('.next').click(function(){
   $('.slide').removeClass('highZindex');
   $(this).closest('.slide').next('.slide:visible').addClass('highZindex')
})

i just want to remove added class from all of those element and just have to add to the next visible element but whats happening is if click on next link and if the next div is hidden it skips all elements and directly goes to last div and class is also not adding to any element.

$('.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

Just change from 'prev' / 'next' to 'prevAll' / 'nextAll' and select first item from list.

Changed lines

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

If you don't want looping prev btn you can add condition:

$('.prev').click(function(){
    if(!($(this).closest('.slide').prevAll('.slide:visible').length == 0)) {
        $('.slide').removeClass('highZindex');
        $(this).closest('.slide').prevAll('.slide:visible').first().addClass('highZindex'); 
    }
})