El método que permite obtener una lista de los elementos hermanos del seleccionado en jQuery es Siblings( ). Su uso será similar a este ejemplo: $("#select_table").siblings();Es decir, se selecciona un elemento para que a sus hermanos en el DOM se les pueda aplicar un atributo determinado. (ver ejemplo).
El método siblings ( ) devuelve un objeto jQuery
Ejemplo:
Se trata de rodear con un borde los hermanos del tercer elemento de la lista y, además, añadir un color de fondo a los hermanos de la tercera celda de la tabla.
código
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>jQuery Altruistas - Siblings</title>
<script src="../js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#select_li").siblings().addClass("borde");
$("#select_table").siblings().addClass("colorDefondo");
});
</script>
<style>
table {
border: 1px solid black;
border-collapse:collapse;
width: 210px;
}
td {
border: 1px solid black;
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
border: 1px solid black;
}
.colorDefondo {
background-color: #9cf;
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo siblings</h3>
<div class="contenido">
<p>Lista</p>
<ul>
<li>Ítem de la lista 1</li>
<li>Ítem de lista 2</li>
<li id="select_li"><i>Ítem de lista 3</i></li>
<li>Ítem de lista 4</li>
<li>Ítem de lista 5</li>
</ul>
<table>
<tr>
<td>1</td><td>2</td><td id="select_table"><i>3</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
comentarios
