jQuery | nextUntil() con ejemplos

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 jQuery para mostrar el funcionamiento del método nextUntil():

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *