jQuery prev-next可见选择器

Question

我想选择prev或next可见的元素，跳过隐藏的元素。

因此，请单击应c在控制台中编写的第一个标题，但这不起作用。

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

您可以尝试使用nextAll(':visible:first')和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>

Answer 2

$('.atitle').on('click', function(){ 
  if($(this)[0] == $('.atitle:last')[0]){ // for some reason $(this).is(':last') not working
    console.log("EOL");
    return null;
  }
  var atitle = findNext($(this).next('.atitle'));
  if(atitle) console.log(atitle.text());
});

function findNext(elem){
  if($(this)[0] == $('.atitle:last')[0]){
    console.log("EOL");
    return null;
  } 
  if(elem.is(":visible")) 
    return elem;
  else 
    return findNext(elem.next('.atitle'));
}

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