nextUntil () es un método incorporado en jQuery que se usa para encontrar todos los elementos hermanos entre dos elementos dados . 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:
$(selector1).nextUntil(selector2)
Aquí, selector1 es el elemento inicial después del cual se encontrarán los hermanos.
Parámetros: Se acepta un parámetro “selector2” que es el último elemento seleccionado para encontrar los hermanos.
Valor de retorno: Devuelve todos los hermanos entre “selector1” y “selector2”.
Código #1:
<html> <head> <style> .bet_sib * { 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() { $("span").nextUntil("p").css({ "color": "black", "border": "2px solid green" }); }); </script> </head> <body class="bet_sib"> <div> This is the parent element !!! <p>This is first paragraph!</p> <span>first span box !</span> <h2>heading 2!</h2> <h3>heading 3!</h3> <h4>heading 4!</h4> <h5>heading 5!</h5> <h6>heading 6!</h6> <p>This is second paragraph!</p> </div> </body> </html>
En el código anterior, todos los elementos (o hermanos) entre «span» y la siguiente «p» se resaltan.
Producción:
Código #2:
En el siguiente código, se pueden seleccionar todos los hermanos entre el mismo par de elementos.
<html> <head> <style> .bet_sib * { 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() { $("p").nextUntil("p").css({ "color": "black", "border": "2px solid green" }); }); </script> </head> <body class="bet_sib"> <div> This is the parent element !!! <p>This is first paragraph!</p> <span>first span box !</span> <h2>heading 2!</h2> <h3>heading 3!</h3> <h4>heading 4!</h4> <h5>heading 5!</h5> <h6>heading 6!</h6> <p>This is second paragraph!</p> </div> </body> </html>
En el código anterior, todos los elementos (o hermanos) entre los elementos del párrafo 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