Objetos y Funciones Diferidas en jQuery

Encontrar los hermanos de un elemento en el DOM

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>

Ejecutar código

comentarios

 

Deja una respuesta

Your email address will not be published.

Objetos y Funciones Diferidas en jQuery
Anterior post

El cambio de efecto, un clásico en jQuery

Objetos y Funciones Diferidas en jQuery
Siguiente post

El efecto de desplazamiento vertical en jQuery

Latest from Programación