Question

My document contains a text node with a span node after it. In the Chrome inspector, the text node’s nextSibling object is the span node. However, calling textnode.next() returns 0 objects. I’m not adding a selector to the next call and seemingly identical situations throughout the code all work as expected.

Here’s what the relevant DOM tree looks like:

<span id="parent-node">
  some text
  <span id="sibling-node">the span's text</span>
  more text
</span>

Why would calling next() on the “some text” node not return the “sibling-node” span?

Answer 1

From the docs…

Given a jQuery object that represents a set of DOM elements, the .next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.

So according to the docs, it is expected that .next() is called from an element node, not just any node.

Calling from a text node isn’t supported.