Los hermanos() es un método incorporado en jQuery que se utiliza para encontrar todos los elementos hermanos del elemento seleccionado. Los hermanos son aquellos que tienen el mismo elemento principal en DOM Tree. El DOM (Document Object Model) es un estándar del World Wide Web Consortium. Esto se define para acceder a elementos en el árbol DOM.
Sintaxis:
$(selector).siblings(function)
Aquí, el selector es el elemento seleccionado cuyos hermanos se van a encontrar.
Parámetros: Acepta un parámetro opcional “función” que va a decir qué hermanos se deben seleccionar de entre todos los hermanos.
Valor devuelto: Devuelve todos los hermanos del elemento seleccionado.
Código #1:
En el siguiente código, no se pasa ningún parámetro a la función brothers().
<html>
<head>
<style>
.sib * {
display: block;
border: 2px solid lightgray;
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").siblings().css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body class="sib">
<div>
This is parent!!!
<p>This is paragraph!!!</p>
<span>This is span box!!!</span>
<h2>This is heading 2!</h2>
<h3>This is heading 3!</h3>
</div>
</body>
</html>
En el código anterior, se resaltan todos los hermanos de «h2».
Producción:
Código n.º 2:
en el siguiente código, se usa un parámetro opcional para la función para filtrar la búsqueda de hermanos.
<html>
<head>
<style>
.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() {
$("h2").siblings("span").css({
"color": "black",
"border": "2px solid green"
});
});
</script>
</head>
<body class="sib">
<div>
This is parent element !
<p>This is the first paragraph !!!</p>
<span>first span box !!!</span>
<h2>Heading 2!</h2>
<span>second span box !!!</span>
<h3>Heading 3!</h3>
<span>third span box !!!</span>
<p>This is the second paragraph !!!</p>
</div>
</body>
</html>
En el código anterior, se seleccionan todos los hermanos de «h2» con el nombre de elemento «span».
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