如何获取在jquery中可见的下一个元素

Posted 2023-02-25

【中文标题】如何获取在jquery中可见的下一个元素

【英文标题】：how to get next element that is visible in jquery

【发布时间】：2015-07-23 16:08:34

【问题描述】：

我有一些元素以及每个元素中的上一个和下一个链接。 好像我单击下一步我只想将一个类添加到下一个可见的 div，并且我想跳过隐藏的 div，如果 div 是隐藏的，则将类添加到隐藏元素后可见的下一个 div。为此我写了这样的东西

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

我只想从所有这些元素中删除添加的类，只需要添加到下一个可见元素，但是如果单击下一个链接并且如果下一个 div 被隐藏，它会跳过所有元素并直接转到最后一个div 和 class 也没有添加到任何元素。

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

【问题讨论】：

你真的要使用 z-index 来实现吗？

是的，因为它很简单

还有其他方法可以达到同样的效果吗？？ @安德烈·帕切科

为什么不添加一个类“可见”（带有 css display:block）和“隐藏”（带有 css display: none）？使用它你不需要放置绝对位置，也不需要使用 z-index。

使用 .next() 或 prev() 时您将面临的另一个问题是，当您到达 div 中的最后一个元素或第一个元素时，您将无法走得更远。解决方法是在“按钮”到达最后一个或第一个元素时立即禁用它（如果我可以这样称呼它们）。

【参考方案1】：

只需将 'prev' / 'next' 更改为 'prevAll' / 'nextAll' 和从列表中选择第一项。

换行

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

如果你不想循环 prev btn 你可以添加条件：

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