jquery prev-next visible selector

Question

I want to select prev or next visible element, jumping over hidden ones.

So click on the first title shoud write c in console, but it doesn't work.

$('.atitle').on('click', function(){
  console.log($(this).next(':visible').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle'>a</div>
<div class='atitle' hidden>b</div>
<div class='atitle'>c</div>
<div class='atitle'>d</div>

Answer 1

You can try with nextAll(':visible:first') and prevAll(':visible:first'):

$('.atitle').on('click', function(){
  console.clear();
  console.log($(this).nextAll(':visible:first').text() + ':Next');
  console.log($(this).prevAll(':visible:first').text() + ':Prevoius');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle'>a</div>
<div class='atitle' hidden>b</div>
<div class='atitle'>c</div>
<div class='atitle'>d</div>