<br> 在 JQuery 中搞砸 .next()

Question

我正在破解一个名为wigi(board(的实验性分页接口，但遇到了一个问题。

界面由左侧垂直运行的任何l1(主题(类或l2(副标题(类工作。页面(l3类节点(表示为连接到l1或l2的边上的点。

鼠标悬停在任何节点上都会将选择器移动到该节点，并调用数据库查询来显示特定页面的内容。这很好用。它像它应该的那样移动。

现在，我有一些按钮，它们也可以在导航列表中的下一个li和上一个li之间移动。这些是未来刷单和其他互动的填充物，以证明这个问题。

现在，这些按钮工作到一定程度，直到jquery.next((点击<br>节点，我正在使用它来打断l3行并将菜单垂直于下一个l1或l2。当.next碰到其中一个节点之前的最后一个节点时，它停止活动，不会跳到下一行。为什么？修复它的最佳策略是什么？

JS小提琴：http://jsfiddle.net/93g786jp/next的问题就在这里。它正在运行一个li列表(最好看看JSfiddle(

function nextAndBack(e) {
var cur = $('.dots .selected'),
next = cur.next('li'),
prev = cur.prev('li');
if (e.target.id == 'nextButton') {
if (next.length == 1) {
newSelected(next);
console.log("Next Node:")
console.log(next);
$(next).trigger("mouseover");
}
} else if (e.target.id == 'prevButton') {
if (prev.length == 1) {
newSelected(prev);
console.log("Previous Node:")
console.log(prev);
$(prev).trigger("mouseover");
}
}

}

请注意，这是基于Lucas Bebber的粘性界面@https://codepen.io/lbebber/pen/lFdHu这是我能为我想要的界面找到的最匹配的界面。对于发布的例子，我去掉了任何效果和其他附加内容，所以存在一些存根。

Answer 1

由于<br />妨碍了选择同级项，您可以使用nextAll()或prevAll()，然后获得所选项的first()：

next = cur.nextAll('li').first(),
prev = cur.prevAll('li').first();

function wigiBoardMove() {
var cur = $(this);
var desty = cur.position().top;
var destx = cur.position().left;
var t = 0.6;
gsap.to($(".select"), t, {
y: desty,
ease: Back.easeOut
});
gsap.to($(".select"), t, {
x: destx,
ease: Back.easeOut
});
newSelected(cur);
}

function newSelected(newTarget) {
$('.selected').removeClass('selected');
newTarget.addClass('selected');
}

function nextAndBack(e) {
var cur = $('.dots .selected'),
next = cur.nextAll('li').first(),
prev = cur.prevAll('li').first();
if (e.target.id == 'nextButton') {
if (next.length == 1) {
newSelected(next);
$(next).trigger("mouseover");
}
} else if (e.target.id == 'prevButton') {
if (prev.length == 1) {
newSelected(prev);
$(prev).trigger("mouseover");
}
}
}

/* Modified from gooey pagnation code published by Lucas Bebber @ https://codepen.io/lbebber/pen/lFdHu */
$(function() {
$(".dot").on("mouseenter", wigiBoardMove);
var lastPos = $(".select").position().top;
function updateScale() {
var pos = $(".select").position().top;
var speed = Math.abs(pos - lastPos);
var d = 44;
var offset = -20;
var hd = d / 2;
var scale = (offset + pos) % d;
if (scale > hd) {
scale = hd - (scale - hd);
}
scale = 1 - ((scale / hd) * 0.35);
gsap.to($(".select"), 0.1, {
scaleY: 1 + (speed * 0.06),
scaleX: scale
})
lastPos = pos;
requestAnimationFrame(updateScale);
}
requestAnimationFrame(updateScale);
$(".dot:eq(0)").trigger("mouseover");
// Back and Forward Node Logic
$('#nextButton, #prevButton').on('click', nextAndBack);
})

#container {}
.dots {
list-style-type: none;
padding: 0;
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: -10px;
padding-right: 10px;
position: absolute;
top: 0px;
width: 150px;
right: 0px;
}
.dot {
display: inline-block;
vertical-align: middle;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
color: white;
position: relative;
z-index: 2;
}
.l1 {
border-radius: 100%;
width: 10px;
height: 10px;
background: blue;
border: none;
}
.l3 {
border-radius: 100%;
width: 7px;
height: 7px;
border: none;
background: blue;
}
.select {
display: block;
border-radius: 100%;
width: 15px;
height: 15px;
background: #daa520;
position: absolute;
z-index: 3;
top: -4px;
left: 1px;
pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<div id="container">
<ul class="dots">
<li class="select"></li>
<li class="dot l1"></li>
<li class="dot l3"></li>
<li class="dot l3"></li>
<li class="dot l3"></li><br>
<li class="dot l1"></li>
<li class="dot l3"></li>
<li class="dot l3"></li><br>
<li class="dot l1"></li>
<li class="dot l3"></li><br>
</ul>
<img id="nextButton" height="10" width="10" alt="Next Node" /><br>
<img id="prevButton" height="10" width="10" alt="Previous Node" />
</div>