jQuery - 非兄弟姐妹之间的上一个/下一个导航

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 结构，即将它们全部放在同一个父元素中。

如果导航是无限的，那就太好了 - 即在最后一个元素打开时单击下一步将显示第一个元素，反之亦然，但如果它太复杂，则不需要这样做。

提前致谢，我们将不胜感激！

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>