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

Ну, так как вы заявили, что хотите выбрать видимый элемент next или prev, я предполагаю, что вам нужен только один из них, и он должен быть ближайшим между ними. Чтобы достичь этого, одним из решений является выбор следующего видимого, предыдущего видимого и сравнение между ними, которое является ближайшим. Итак, с учетом следующего макета:

<div class='atitle'>a</div>
<div class='atitle' hidden>b</div>
<div class='atitle'>c</div>
<div class='atitle'>d</div>
<div class='atitle' hidden>e</div>
<div class='atitle'>f</div>
<div class='atitle' hidden>g</div>
<div class='atitle'>h</div>

Нажатие на каждый элемент должно вернуть:

┌─────────────┬───────────────┐
│ Clicking on │ Should return │
├─────────────┼───────────────┤
│ a           │ c             │
│ c           │ d             │
│ d           │ c             │
│ f           │ d or h*       │
│ h           │ f             │
└─────────────┴───────────────┘

* Так как d и h совпадаютрасстояние от f, если щелкнуть по последнему, вы должны решить, какой из первых вы выберете, если хотите только один, в этом примере я выбираю оба.

$('.atitle').on('click', function() {

  var $this = $(this);

  // Select the closest prev and next visible elements
  var $prev = $this.prevAll('.atitle:visible:eq(0)');
  var $next = $this.nextAll('.atitle:visible:eq(0)');

  // Check the indexes of each one
  var prevDiff = $prev.index() < 0 ? NaN : Math.abs($this.index() - $prev.index());
  var nextDiff = $next.index() < 0 ? NaN : Math.abs($this.index() - $next.index());

  // Decide which one should be selected
  if (isNaN(prevDiff) || nextDiff < prevDiff) {
    console.log( $next.text() );
  } else if (isNaN(nextDiff) || prevDiff < nextDiff) {
    console.log( $prev.text() );
  } else if (nextDiff === prevDiff) {
    console.log($prev.text(), $next.text());
  } else {
    console.log('no element');
  }
  
});

<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>
<div class='atitle' hidden>e</div>
<div class='atitle'>f</div>
<div class='atitle' hidden>g</div>
<div class='atitle'>h</div>

Answer 3

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