<br> mucking up .next() in JQuery

Question

I am hacking together an experimental pagination interface called wigi(board) but have run into an issue.

The interface works by any l1 (subject) class or l2 (subheading) class running vertical down the left. Pages (l3 class nodes) are represented as points attached to the side of an l1 or l2.

Mousing over any node will move the selector to that node and call a db query to display a specific page's contents. This works fine. It moves like it should.

Right now I have buttons that will also move between the next and previous li in the navigation list. These are filler for future swiping and other interaction to demonstrate the issue.

Right now these buttons work to a point, until the jquery .next() hits a <br> node, which I am using in order to break the l3 lines and continue the menu vertical to the next l1 or l2. When the .next hits the last node before one of these, it stops dead and wont jump down to the next row. Why? What is the best strategy to fix it?

JS fiddle: http://jsfiddle.net/93g786jp/ The issue with next is in here. It is running over an li list (best to look at 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");
    }
}

}

Note this is based on the gooey interface by Lucas Bebber @ https://codepen.io/lbebber/pen/lFdHu which was the closet match I could find for an interface like what I wanted. For the posted example, I stripped out any effects and other extras so some stubs exist.

Answer 1

As the <br /> gets in the way of selecting siblings you can instead use nextAll() or prevAll() and then get the first() of the selected items:

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>