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>