我有一堆具有不同父元素的相同类型的元素,但是我希望能够无缝导航/循环所有这些元素,就像它们在一起一样。
<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">‹</a>
<a href="#" class="next">›</a>
我设法做到了这一点:https://jsfiddle.net/pj0ecxge/
当前,它不能按预期运行,因为prev()和next()仅用于定位同级元素,因此,如果上一个或下一个元素在另一个父级中,则箭头不起作用。
默认情况下,单个元素将始终处于打开状态,但并不总是与示例中所示的元素相同。同样,只能同时打开一个元素。
如果有区别,我可以向所有子元素添加一个类,但是不能更改HTML结构,即将它们全部放在同一个父元素中。
如果导航是无限的,那就太好了-即在打开最后一个元素时单击“下一步”将显示第一个元素,反之亦然,但是如果这样做太复杂,则不需要这样做。
在此先感谢您,任何帮助将不胜感激!
最佳答案
当前集合到达任一末端时,找到下一个集合。如果集合是最后一个集合,则返回第一个集合(反之亦然)。
$('.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');
});