En este artículo, discutiremos cómo seleccionar todos los elementos hermanos de un elemento usando jQuery. Para seleccionar todos los elementos hermanos de un elemento, usaremos el método brothers() .
El método brothers() se usa para encontrar todos los elementos hermanos del elemento seleccionado. Los hermanos son aquellos que tienen el mismo elemento principal en DOM Tree.
Sintaxis:
$(selector).siblings(function)
Esta función acepta un parámetro opcional «función» que seleccionará todos los hermanos de los elementos seleccionados. Devuelve todos los hermanos del elemento seleccionado.
Enfoque: Primero, crearemos el contenedor div principal y dentro del contenedor principal, agregaremos dos contenedores div. Cuando el usuario hace clic en el botón, se llama al método brothers() y selecciona los hermanos del contenedor de la clase section1. Después de seleccionar los hermanos, le agregamos algunas propiedades CSS.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<title>
How to select all sibling elements
of an element using jQuery?
</title>
<style>
.main {
width: 450px;
text-align: justify;
font-size: 18px;
}
#GFG {
padding: 5px 15px;
margin-top: 20px;
}
.Geeks {
font-size: 18px;
font-weight: bold;
color: green;
}
</style>
<script>
$(document).ready(function () {
$("#GFG").on('click', function () {
$(".section1").siblings().addClass("Geeks");
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to select all sibling elements
of an element using jQuery?
</h3>
<div class="main">
<div class="section1">
HTML stands for HyperText Markup
Language. It is used to design
web pages using a markup language.
HTML is the combination of
Hypertext and Markup language.
</div>
<div class="section2">
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages.
</div>
</div>
<input type="button" id="GFG"
value="Remove Contents">
</center>
</body>
</html>
Producción:
