Siguiente()
next() es una función incorporada en jQuery que se usa para devolver el siguiente hermano del elemento seleccionado. Los hermanos son aquellos que tienen el mismo elemento principal en DOM Tree. Document Object Model (DOM) es un estándar del World Wide Web Consortium. Esto define para acceder a elementos en el árbol DOM.
Sintaxis:
$(selector).next()
Parámetros: No acepta ningún parámetro.
Valor devuelto: Devuelve los siguientes hermanos del elemento seleccionado.
Código #1:
<html>
<head>
<style>
.next * {
display: block;
border: 2px solid lightgrey;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("h3").next().css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body class="next">
<div>
This is parent element !
<p>This is first paragraph </p>
<span>first span box </span>
<h2>heading 2 !</h2>
<h3>heading 3 !</h3>
<p>This is the second paragraph and next
sibling to h3 !</p>
</div>
</body>
</html>
En el código anterior, el siguiente elemento hermano de «h3» se resalta con color verde.
Producción:
siguienteTodo()
nextAll () es un método incorporado en jQuery que se usa para devolver todos los siguientes elementos hermanos del elemento seleccionado.
Sintaxis:
$(selector).nextAll()
Parámetros: No acepta ningún parámetro.
Valor devuelto: Devuelve todos los siguientes elementos hermanos del elemento seleccionado.
Código #2:
<!DOCTYPE html>
<html>
<head>
<style>
.next * {
display: block;
border: 2px solid lightgrey;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("h2").nextAll().css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body class="next">
<div>
This is parent element !
<p>This is first paragraph </p>
<span>first span box </span>
<h2>heading 2 !</h2>
<h3>heading 3 !</h3>
<p>This is the second paragraph and next
sibling to h3 !</p>
</div>
</body>
</html>
En el código anterior, todos los siguientes elementos hermanos de «h2» se resaltan con color verde.
Producción:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA