next()

next() returns the next sibling of an HTML element, which can be:

• The elements that match the selector of a script (see results).
• One element that matches the selector of a script that runs for "Each matched element" (see this and Setting the scope of a script).
• The elements returned by a query in the template (see query()).

In HTML, siblings are HTML elements that share the same parent, i.e. HTML elements in the same container element.
Note that a sibling can be a different type of element. For example, if a paragraph, an image and a table follow each other in the same Box, they are siblings.

What if there are no siblings?

If you call prev() or next() on a collection of elements (either results or the result set of query()), the function will return a collection of siblings. If none of the elements has a previous or next sibling, the collection will be empty. Actions performed on an empty collection will simply have no effect.

If you call prev() or next() on a single element (this in an 'Each matched element' script), and the element has no previous or next sibling, the function returns null. Performing an operation on a null value will result in an error, which means that the rest of the script won't be executed. In this case, it is useful to check the return value, unless it's certain that it will never be null.

Example

Assume that there are three consecutive paragraphs in a Box and that the second of those paragraphs has an ID that matches the selector of this script. The paragraph is stored in the results object (see results). The following script changes the font-weight of the next paragraph - the third paragraph in the Box - to bold.

results.next().css("font-weight", "bold");

If the elements in results don't have siblings, this line of code will have no effect. It also won't result in an error.

In an 'Each matched element' script you would first need to check the return value of this.next():

var nextSibling = this.next();
if nextSibling != null { nextSibling.css("font-weight", "bold"); }