jQuery Seleccionar hermano

  2. HowTo
  3. jQuery Howtos
  4. jQuery Seleccionar hermano
Sheeraz Gul 15 febrero 2024
jQuery jQuery Sibling
  1. Use el método siblings() para seleccionar un hermano en jQuery
  2. Use el método next() para seleccionar un hermano en jQuery
  3. Utilice el método nextAll() para seleccionar un hermano en jQuery
  4. Utilice el método nextUntil() para seleccionar un hermano en jQuery
  5. Use el método prev() para seleccionar un hermano en jQuery
  6. Utilice el método prevAll() para seleccionar un hermano en jQuery
  7. Utilice el método prevUntil() para seleccionar un hermano en jQuery
jQuery Seleccionar hermano

Los hermanos son los elementos que están antes y después de un elemento dado. jQuery tiene muchos métodos para seleccionar hermanos de un árbol DOM en función del hermano que queremos seleccionar.

Estos métodos incluyen:

  1. hermanos()
  2. siguiente()
  3. siguienteTodo()
  4. siguienteHasta()
  5. anterior()
  6. prevTodas()
  7. anteriorHasta()

Este tutorial demuestra cada método para seleccionar un hermano en jQuery.

Use el método siblings() para seleccionar un hermano en jQuery

El método hermanos() se utiliza para seleccionar todos los elementos hermanos del elemento dado; la sintaxis para este método se encuentra a continuación.

$(selector).siblings()

La sintaxis anterior devolverá todos los hermanos del elemento de párrafo; también toma un parámetro que amplificará qué elemento hermano seleccionar. Probemos un ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

El código anterior agregará un borde a los hermanos del párrafo. Ver la salida:

Hermanos jQuery

También podemos usar el método de los hermanos para seleccionar un hermano particular de un elemento. Ver el ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings("ul").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

El código anterior ahora solo seleccionará el hermano ul del párrafo. Ver la salida:

Hermanos de jQuery Seleccionar

Use el método next() para seleccionar un hermano en jQuery

El método next() de jQuery se utiliza para obtener el hermano siguiente inmediato del elemento dado. La sintaxis de este método se encuentra a continuación.

$(selector).next()

El método next() no tomará ningún parámetro; probemos un ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").next().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

El código anterior seleccionará el siguiente hermano del elemento de párrafo y le agregará un borde. Ver la salida:

jQuery siguiente

Utilice el método nextAll() para seleccionar un hermano en jQuery

El método jQuery nextAll() obtiene todos los hermanos después del elemento dado. La sintaxis de este método se encuentra a continuación.

$(selector).nextAll()

El método nextAll() no tomará ningún parámetro; probemos un ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextAll()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").nextAll().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
    </div>
</body>
</html>

El código anterior usa el método nextAll para seleccionar todos los hermanos siguientes del elemento de párrafo dado. Ver la salida:

jQuery siguiente todo

Utilice el método nextUntil() para seleccionar un hermano en jQuery

El método jQuery nextUntil() obtiene los hermanos después del elemento dado hasta un elemento específico. La sintaxis de este método se encuentra a continuación.

$(selector).nextUntil(element)

El método nextUntil() tomará un parámetro, un elemento específico; probemos un ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextUntil()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").nextUntil("h3").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

El código anterior agregará el borde a los siguientes hermanos del elemento de párrafo hasta el elemento heading3. Ver la salida:

jQuery siguiente hasta

Use el método prev() para seleccionar un hermano en jQuery

El método jQuery prev() se utiliza para obtener el hermano inmediatamente anterior del elemento dado. La sintaxis de este método se encuentra a continuación.

$(selector).prev()

El método prev() no tomará ningún parámetro; probemos un ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prev()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").prev().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

El código anterior agregará un borde al elemento inmediatamente anterior del elemento dado. Ver la salida:

jQuery anterior

Utilice el método prevAll() para seleccionar un hermano en jQuery

El método jQuery prevAll() obtiene todos los hermanos antes del elemento dado. La sintaxis de este método se encuentra a continuación.

$(selector).prevAll()

El método prevAll() no tomará ningún parámetro; probemos un ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevAll()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("h3").prevAll().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

El código anterior agregará el borde a todos los hermanos anteriores de los elementos heading3. Ver la salida:

jQuery Anterior Todo

Utilice el método prevUntil() para seleccionar un hermano en jQuery

El método jQuery prevUntil() obtiene los hermanos antes del elemento dado hasta un elemento específico. La sintaxis de este método se encuentra a continuación.

$(selector).prevUntil(element)

El método prevUntil() tomará un parámetro, un elemento específico; probemos un ejemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevUntil()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("h3").prevUntil("p").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

El código anterior agregará el borde a los hermanos anteriores del elemento heading3 hasta el elemento del párrafo. Ver la salida:

jQuery anterior hasta

Autor: Sheeraz Gul
Sheeraz Gul avatar Sheeraz Gul avatar

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook