Método next() de Navegación jQuery
Ejemplo
Buscar el hermano siguiente de cada párrafo, seleccionando solo los párrafos con la clase "selected":
$("p");.next(".selected");.css("background", "yellow");
Definición y uso
next() obtiene el hermano siguiente de cada elemento en la colección de elementos coincidentes. Si se proporciona un selector, se devuelve el siguiente hermano siguiente que coincide con el selector.
Sintaxis
.next(selector)
| Parámetro | Descripción |
|---|---|
| selector | Valor de cadena, que contiene la expresión de selector utilizada para coincidir con los elementos. |
Descripción detallada
Si se proporciona un objeto jQuery que representa una colección de elementos DOM, el método .next() nos permite buscar el elemento hermano siguiente en el árbol DOM y construir un nuevo objeto jQuery con el elemento que coincide.
Este método acepta una expresión de selector opcional, del tipo que paso a la función $(). Si el elemento hermano siguiente coincide con el selector, se mantendrá en el nuevo objeto jQuery construido; de lo contrario, se excluirá.
Piensa en la siguiente página con una lista simple:
<ul> <li>elemento de lista 1</li> <li>elemento de lista 2</li> <li class="third-item">elemento de lista 3</li> <li>elemento de lista 4</li> <li>elemento de lista 5</li> </ul>
Si comenzamos con el elemento tres, podemos encontrar el elemento que aparece después de él:
$('li.third-item');.next();.css('background-color', 'red');
El resultado de esta llamada es que el proyecto 4 se ha configurado con un fondo rojo. Debido a que no hemos aplicado una expresión de selector, el elemento siguiente está claramente incluido como parte del objeto. Si ya hemos aplicado un selector, se detectará si coincide antes de incluirlo.
