jQuery next sibling that has a particular kind of child

Question

My HTML has a container element with many sibling div elements, each of which contains a contenteditable p. These sibling div are "interrupted", however, by other div which do not contain an editable element.

What is challenging me at the moment is how to "hop over" these interrupting div when using the left and right arrow keys to move from C to D or from D back to C (see snippet). Navigation stops when it encounters these div lacking an editable element. How can I correct this?

$('#foo p[contenteditable = "true"]').bind("keydown", function(e) {
  switch (e.key) {
    case "ArrowLeft":
      var $P = $(this).parent().prev().children('p[contenteditable = "true"]');
      setTimeout(() => $P.focus(), 0);
      e.stopImmediatePropagation();
      e.preventDefault();
      break;

    case "ArrowRight":
      var $P = $(this).parent().next().children('p[contenteditable = "true"]');
      setTimeout(() => $P.focus(), 0);
      e.stopImmediatePropagation();
      e.preventDefault();
      break;
  }
});

#foo p[contenteditable="true"] {
  /* font-size: 22px;*/
  height: 22px;
  width: 22px;
  color: cyan;
  font-weight: bold;
  background-color: cyan;
}

#foo p.const {
  background-color: inherit;
  border: none;
  height: 22px;
  width: 22px;
}

#foo div {
  text-align: center;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
  <div>
    <p contenteditable="true" tabindex="0"></p>
    <p>A</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="1"></p>
    <p>B</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="2"></p>
    <p>C</p>
  </div>
  <div>
    <p class="const">&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div>
    <p class="const">"</p>
    <p>"</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="3"></p>
    <p>D</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="4"></p>
    <p>E</p>
  </div>
</div>

Answer 1

Instead of prev() or next(), use .prevAll(":has(p[contenteditable])").first() and .nextAll(":has(p[contenteditable])").first():

$('#foo p[contenteditable = "true"]').bind("keydown", function(e) {

  switch (e.key) {
    case "ArrowLeft":
      var $P = $(this).parent().prevAll(":has(p[contenteditable])").first().children('p[contenteditable = "true"]');
      setTimeout(() => $P.focus(), 0);
      e.stopImmediatePropagation();
      e.preventDefault();
      break;

    case "ArrowRight":
      var $P = $(this).parent().nextAll(":has(p[contenteditable])").first().children('p[contenteditable = "true"]');
      setTimeout(() => $P.focus(), 0);
      e.stopImmediatePropagation();
      e.preventDefault();
      break;

  }

});

#foo p[contenteditable="true"] {
  /* font-size: 22px;*/
  height: 22px;
  width: 22px;
  color: cyan;
  font-weight: bold;
  background-color: cyan;
}

#foo p.const {
  background-color: inherit;
  border: none;
  height: 22px;
  width: 22px;
}

#foo div {
  text-align: center;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">

  <div>
    <p contenteditable="true" tabindex="0"></p>
    <p>A</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="1"></p>
    <p>B</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="2"></p>
    <p>C</p>
  </div>
  <div>
    <p class="const">&nbsp;</p>
    <p>&nbsp;
      <p>
  </div>
  <div>
    <p class="const">"</p>
    <p>"
      <p>
  </div>
  <div>
    <p contenteditable="true" tabindex="3"></p>
    <p>D</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="4"></p>
    <p>E</p>
  </div>



</div>

prevAll/nextAll match all previous/following siblings that match the selector, returning a jQuery object in order (so the nearest sibling is first, then the second nearest, etc.); using .first() then reduces the set to just the nearest sibling.

I've used the :has pseudo-selector in that, but you might be better off giving the relevant elements a class instead, since :has is a jQuery-specific addition to CSS. Here I've used the class stop so it's .xxxxAll(".stop").first():

$('#foo p[contenteditable = "true"]').bind("keydown", function(e) {

  switch (e.key) {
    case "ArrowLeft":
      var $P = $(this).parent().prevAll(".stop").first().children('p[contenteditable = "true"]');
      setTimeout(() => $P.focus(), 0);
      e.stopImmediatePropagation();
      e.preventDefault();
      break;

    case "ArrowRight":
      var $P = $(this).parent().nextAll(".stop").first().children('p[contenteditable = "true"]');
      setTimeout(() => $P.focus(), 0);
      e.stopImmediatePropagation();
      e.preventDefault();
      break;

  }

});

#foo p[contenteditable="true"] {
  /* font-size: 22px;*/
  height: 22px;
  width: 22px;
  color: cyan;
  font-weight: bold;
  background-color: cyan;
}

#foo p.const {
  background-color: inherit;
  border: none;
  height: 22px;
  width: 22px;
}

#foo div {
  text-align: center;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">

  <div class="stop">
    <p contenteditable="true" tabindex="0"></p>
    <p>A</p>
  </div>
  <div class="stop">
    <p contenteditable="true" tabindex="1"></p>
    <p>B</p>
  </div>
  <div class="stop">
    <p contenteditable="true" tabindex="2"></p>
    <p>C</p>
  </div>
  <div>
    <p class="const">&nbsp;</p>
    <p>&nbsp;
      <p>
  </div>
  <div>
    <p class="const">"</p>
    <p>"
      <p>
  </div>
  <div class="stop">
    <p contenteditable="true" tabindex="3"></p>
    <p>D</p>
  </div>
  <div class="stop">
    <p contenteditable="true" tabindex="4"></p>
    <p>E</p>
  </div>



</div>

Answer 2

To do what you require you need to use prevAll() and nextAll(), instead of prev() and next(), as there's intermediary elements which you need to skip. You can combine this the :has() selector to only find containers which have a descendent contenteditable and also with first() to retrieve the nearest match.

Also note that bind() is deprecated and will be removed from jQuery soon; use on() instead. The logic can also be amended slightly to reduce the reliance on switch and avoid the unnecessary repetition. Finally you have used <p> instead of </p> in a couple of places in the HTML.

With that said, try this:

let keyMethodLookup = {
  ArrowLeft: 'prevAll',
  ArrowRight: 'nextAll'
}

$('#foo p[contenteditable="true"]').on("keydown", e => {
  if (!keyMethodLookup.hasOwnProperty(e.key))
    return;

  let method = keyMethodLookup[e.key];
  $(e.currentTarget).parent()[method]('div:has(p[contenteditable="true"])').first().children('p[contenteditable="true"]').focus();
  e.stopImmediatePropagation();
  e.preventDefault();
});

#foo p[contenteditable="true"] {
  /* font-size: 22px;*/
  height: 22px;
  width: 22px;
  color: cyan;
  font-weight: bold;
  background-color: cyan;
}

#foo p.const {
  background-color: inherit;
  border: none;
  height: 22px;
  width: 22px;
}

#foo div {
  text-align: center;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
  <div>
    <p contenteditable="true" tabindex="0"></p>
    <p>A</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="1"></p>
    <p>B</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="2"></p>
    <p>C</p>
  </div>
  <div>
    <p class="const">&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <div>
    <p class="const">"</p>
    <p>"</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="3"></p>
    <p>D</p>
  </div>
  <div>
    <p contenteditable="true" tabindex="4"></p>
    <p>E</p>
  </div>
</div>