Converting the jQuery next() method to vanilla JS

As part of my ongoing series on converting jQuery methods to vanilla JS, today, we’re going to look at the jQuery next() method.

Let’s dig in.

The jQuery next() method

The jQuery next() method gets the next sibling of an element. You can optionally filter by a selector.

For example, let’s say you have markup like this.

<ul>
	<li>list item 1</li>
	<li>list item 2</li>
	<li class="third-item">list item 3</li>
	<li>list item 4</li>
	<li>list item 5</li>
</ul>

You can use the jQuery next() method to get the li with list item 4 in it like this.

$('.third-item').next();

If you only wanted to get the element if it was a button, you could do this instead.

$('.third-item').next('button');

Let’s look at how to do that with vanilla JS.

The nextSibling and nextElementSibling properties

The vanilla JS nextSibling property returns the next sibling node (including both elements and other nodes likes text strings, comments, and so on). The nextElementSibling returns the sibling, but only elements.

To get the li with list item 4 in it with vanilla JS, you would do this.

document.querySelector('.third-item').nextElementSibling;

Filtering by selector

The jQuery next() method also lets you filter by a selector. How would you do that with vanilla JS?

Let’s create a little helper method for this.

First, we’ll pass in the element, and an optional selector to use. Then, we’ll get the elem’s nextElementSibling.

If there’s no selector to filter by, we’ll just return the element. Otherwise, we’ll check if the nextElem matches the selector using the matches() method. If it matches, we’ll return it, If not, we’ll return null.

var next = function (elem, selector) {

	// Get the next element
	var nextElem = elem.nextElementSibling;

	// If there's no selector, return the next element
	if (!selector) {
		return nextElem;
	}

	// Otherwise, check if the element matches the selector
	if (nextElem && nextElem.matches(selector)) {
		return nextElem;
	}

	// if it's not a match, return null
	return null;

};

Browser Compatibility

The nextSibling property works in all modern browsers, and back to at least IE6. The nextElementSibling also works in all modern browsers, but only back to IE9.

The matches() method works in all modern browsers, and back to IE9, but in older implementations of those browsers used vendor prefixing. You can ensure consistent behavior across browsers with a polyfill.