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

时间:2015-11-02 06:12:23

标签: javascript jquery

我有一堆具有不同父母的相同类型的元素,但我希望能够无缝地导航/循环遍历所有这些元素,就好像它们在一起一样。

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

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

提前致谢,非常感谢任何帮助!

2 个答案:

答案 0 :(得分: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-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>

答案 1 :(得分: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');
});