instance method Element#next
Element#next([expression[, index = 0]]) → Element
Element#next([index = 0]) → Element
-
expression
(String
) – A CSS selector.
Returns element
's first following sibling (or the Nth, if index
is specified) that matches expression
. If no expression
is
provided, all following siblings are considered. If none matches these
criteria, undefined
is returned.
More information
The Element.next
method is part of Prototype's ultimate DOM traversal
toolkit (check out Element.up
, Element.down
and
Element.previous
for some more Prototypish niceness). It allows
precise index-based and/or CSS expression-based selection of any of
element
's following siblings. (Note that two elements are considered
siblings if they have the same parent, so for example, the head
and
body
elements are siblings—their parent is the html
element.)
As it totally ignores text nodes (it only returns elements), you don't have to worry about whitespace nodes.
And as an added bonus, all elements returned are already extended (see
Element.extend
) allowing chaining:
$(element).down(1).next('li', 2).hide();
Walking the DOM has never been that easy!
Arguments
If no arguments are passed, element
's following sibling is returned
(this is similar as calling nextSibling
except Element.next
returns an
already extended element).
If index
is defined, element
's corresponding following sibling is
returned. (This is equivalent to selecting an element from the array of
elements returned by the method Element.nextSiblings
). Note that the
sibling right below element
has an index of 0.
If expression
is defined, Element.next
will return the element
first
following sibling that matches it.
If both expression
and index
are defined, Element.next
will collect
all of element
's following siblings matching the given CSS expression
and will return the one at the specified index.
In all of the above cases, if no following sibling is found,
undefined
will be returned.
Examples
<ul id="fruits">
<li id="apples">
<h3 id="title">Apples</h3>
<ul id="list-of-apples">
<li id="golden-delicious">Golden Delicious</li>
<li id="mutsu">Mutsu</li>
<li id="mcintosh" class="yummy">McIntosh</li>
<li id="ida-red" class="yummy">Ida Red</li>
</ul>
<p id="saying">An apple a day keeps the doctor away.</p>
</li>
</ul>
Get the first sibling after "#title":
$('title').next();
// or:
$('title').next(0);
// -> ul#list-of-apples
Get the second sibling after "#title":
$('title').next(1);
// -> p#saying
Get the first sibling after "#title" with node name "p":
$('title').next('p');
// -> p#sayings
Get the first sibling after "#golden-delicious" with class name "yummy":
$('golden-delicious').next('.yummy');
// -> li#mcintosh
Get the second sibling after "#golden-delicious" with class name "yummy":
$('golden-delicious').next('.yummy', 1);
// -> li#ida-red
Try to get the first sibling after "#ida-red":
$('ida-red').next();
// -> undefined
This method can be called either as an instance method or as a generic method. If calling as a generic, pass the instance in as the first argument.