jQuery - 非兄弟姐妹之间的prev/next导航

Question

我有一堆相同类型的元素有不同的父母，但我希望能够无缝地浏览/循环所有人，就好像他们在一起。

<div> 
    <a href="#"></a> 
    <a href="#" class="open></a> 
    <a href="#"></a> 
    <a href="#"></a> 
</div> 

<div> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
</div> 

<div> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
    <a href="#"></a> 
</div> 

<a href="#" class="prev">&lsaquo;</a> 
<a href="#" class="next">&rsaquo;</a> 

我已经成功地走到这一步：https://jsfiddle.net/pj0ecxge/

目前按预期不起作用，因为prev（）和next（）只是为了针对同级元素，所以唐箭如果上一个或下一个元素位于另一个父元素中，则不起作用。

默认情况下，单个元素将始终打开，但它不总是与示例中所示的元素相同。而且，只有一个元素可以同时打开。

如果它有所作为，我可以将一个类添加到所有子元素，但我无法更改HTML结构，即将它们全部放入同一父元素中。

如果导航是无限的 - 即在最后一个元素打开时点击next将显示第一个元素，反之亦然，但如果它太复杂，则不需要。

在此先感谢和任何帮助将非常感激！

Answer 1

找出下一集时的电流设定已经达到任何一端。如果这个集合是最后一个，那么回到第一个集合（反之亦然）。

$('.prev').click(function(e) { 
    e.preventDefault(); 

    var current = $('.open'); 
    var prev = current.prev(); 
    if (!prev.length) { 
     prev = current.parent().prev('div').children('a:last-of-type'); 
     if (!prev.length) { 
      prev = $('div:last-of-type').children('a:last-of-type'); 
     } 
    } 

    current.removeClass('open'); 
    prev.addClass('open'); 
}); 

$('.next').click(function(e) { 
    e.preventDefault(); 

    var current = $('.open'); 
    var next = current.next(); 

    if (!next.length) { 
     next = current.parent().next('div').children('a:first-of-type'); 
     if (!next.length) { 
      next = $('div:first-of-type').children('a:first-of-type'); 
     } 
    } 

    current.removeClass('open'); 
    next.addClass('open'); 
}); 

Answer 2

你可以查看是否有一个/上一个元素，如果没有，那么你可以/移动层上下像

$('.prev').click(function(e) { 
 
    e.preventDefault(); 
 

 
    var current = $('.open'); 
 
    var prev = current.prev(); 
 

 
    if (!prev.length) { 
 
    prev = current.parent().prev('div').children('a:last-child') 
 
    } 
 

 
    if (prev.length) { 
 
    current.removeClass('open'); 
 
    prev.addClass('open'); 
 
    } 
 
}); 
 

 
$('.next').click(function(e) { 
 
    e.preventDefault(); 
 

 
    var current = $('.open'); 
 
    var next = current.next(); 
 
    if (!next.length) { 
 
    next = current.parent().next('div').children('a:first-child') 
 
    } 
 

 
    if (next.length) { 
 
    current.removeClass('open'); 
 
    next.addClass('open'); 
 
    } 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 
div { 
 
    font-size: 0; 
 
} 
 
div a { 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 2px solid black; 
 
} 
 
a { 
 
    display: inline-block; 
 
} 
 
.open { 
 
    background: red; 
 
} 
 
.prev, 
 
.next { 
 
    font-size: 100px; 
 
    text-decoration: none; 
 
    margin: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="#"></a> 
 
    <a href="#" class="open"></a> 
 
    <a href="#"></a> 
 
    <a href="#"></a> 
 
</div> 
 

 
<div> 
 
    <a href="#"></a> 
 
    <a href="#"></a> 
 
    <a href="#"></a> 
 
    <a href="#"></a> 
 
</div> 
 

 
<div> 
 
    <a href="#"></a> 
 
    <a href="#"></a> 
 
    <a href="#"></a> 
 
    <a href="#"></a> 
 
</div> 
 

 
<a href="#" class="prev">&lsaquo;</a> 
 
<a href="#" class="next">&rsaquo;</a>