jquery 上一页-下一页可见选择器

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>