Bueno, como vimos en el anterior posteo, JQuery, parte 7: Relaciones entre elementos. Métodos: .parent(), .append(), .remove(), existen distintas formas de acceder a un elemento, pero no necesariamente desde el mismo, sino de otros que tengan alguna relación con éste.
Una de las ventajas de Jquery es la facilidad con la que nos permite manipular el árbol de elementos. En esta ocasión aprenderemos dos métodos que son muy útiles, .parents() y .find().
Ojo, no confundir, el método que aprendimos la última vez era .parent(), mientras que el que estamos viendo ahora es .parents(), con «s» al final.
El método .parent() nos permite acceder al elemento padre o contenedor del elemento al que estamos invocando. Por ejemplo si tenemos un li, el elemento padre es el ul que lo contiene. El caso del elemento .parents() nos permite hacer lo mismo, pero con la diferencia de puede subir varios elementos. Veamos lo siguiente:
Yo tengo una código como éste:
<ul id="lista">
<li>
<a id="link1" class="link" href="javascript:void(0);"> Link1 </a>
</li>
<li>
<a id="link2" class="link" href="javascript:void(0);"> Link2 </a>
</li>
<li>
<a id="link3" class="link" href="javascript:void(0);"> Link3 </a>
</li>
</ul>
Supongamos que yo quisiera acceder al elemento ul, pero no desde un elemento hijo li, sino desde un hijo que está a un nivel más abajo, desde un elemento a (un link), por ejemplo el que tiene el id «link1«, pare ello tenemos que usar el método .parents() que recibirá un parámetro indicándole un dato que nos permita encontrar el elemento padre, por ejemplo un id, una class o el nombre del elemento.
Estas serían las dos formas posibles:
Por nombre de etiqueta:
var padre_ul = $("#link1").parents("ul");
Por su id:
var padre_ul = $("#link1").parents("#lista");
De esta forma es muy fácil poder acceder a elementos desde hijos que estén a más de un nivel del mismo, es algo que nos facilita, teniendo en cuenta que si usáramos Javascript sin jquery necesitaríamos un par de líneas más para realizar esto.
Ahora realicemos el proceso inverso, vamos a acceder al link, pero desde el ul. Para eso usaremos el método .find(). Este método nos permite acceder a elementos hijos aunque estén a más de un nivel. Al igual que .parents() recibirá un parámetro ya sea un nombre de etiqueta, un id o una class para poder encontrar el elemento.
Entonces nosotros podemos por ejemplo, acceder al link con id «link1» pero desde la etiqueta ul y cambiarle el color:
var link1 = $("#lista").find("#link1");
link1.css('color', '#f00');
Ahora si quisiéramos acceder a todos los links, tendríamos que hacer por la class que tienen los mismos:
var links = $("#lista").find(".link");
links.css('color', '#f00');
¿Fácil no?
Ahora para finalizar haré un ejemplo un poco más completo. Habrá una tabla con algunos datos visibles de empleados, pero dentro de esa tabla habrá campos ocultos, dentro de elementos input hidden, y al presionarse un link ser mostrará los datos completos de ese empleados en forma de lista:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
th, td {border: solid 1px #000;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function mostrarDatosEmpleado(){
$(".ver").each(function(){
$(this).click(function(){
//Buscamos el padro contenedor de todos los elementos que queremos recuperar.
var padre_tr = $(this).parents('tr');
//Al tener el padre que contiene todos los elementos, podemos recuperar los valores de los elementos hijos.
var legajo = padre_tr.find('.legajo').val();
var nombre = padre_tr.find('.nombre').val();
var apellido = padre_tr.find('.apellido').val();
var departamento = padre_tr.find('.departamento').val();
var fecha_ingreso = padre_tr.find('.fecha_ingreso').val();
var nivel = padre_tr.find('.nivel').val();
var personas_a_cargo = padre_tr.find('.personas_a_cargo').val();
//Mostramos por pantalla los datos del empleado.
$("#datos_empleado").html('<ul></ul>');
$("#datos_empleado ul").append('<li> Nombre y apellido: ' + nombre + ' ' + apellido + ' </li>');
$("#datos_empleado ul").append('<li> Legajo: ' + legajo + ' </li>');
$("#datos_empleado ul").append('<li> Departamento: ' + departamento + ' </li>');
$("#datos_empleado ul").append('<li> Fecha de ingreso: ' + fecha_ingreso + ' </li>');
$("#datos_empleado ul").append('<li> Nivel: ' + nivel + ' </li>');
$("#datos_empleado ul").append('<li> Personas a cargo: ' + personas_a_cargo + ' </li>');
});
});
}
$(document).ready(function(){
mostrarDatosEmpleado();
});
</script>
</head>
<body>
<table style="border: solid 1px #000">
<thead>
<tr>
<th> Legajo </th>
<th> Nombre </th>
<th> Apellido </th>
<th> Departamento </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td> 10001 <input type="hidden" value="10001" class="legajo" /> </td>
<td> Cosme <input type="hidden" value="Cosme" class="nombre" /> </td>
<td> Fulanito <input type="hidden" value="Fulanito" class="apellido" /> </td>
<td> Contabilidad <input type="hidden" value="Contabilidad" class="departamento" /> </td>
<td>
<input type="hidden" value="15 de Mayo 1999" class="fecha_ingreso" />
<input type="hidden" value="5" class="nivel" />
<input type="hidden" value="4" class="personas_a_cargo" />
<a class="ver" href="javascript:void(0);"> Ver </a>
</td>
</tr>
<tr>
<td> 10012 <input type="hidden" value="10012" class="legajo" /> </td>
<td> Cornelio <input type="hidden" value="Cornelio" class="nombre" /> </td>
<td> Del Rancho <input type="hidden" value="Del Rancho" class="apellido" /> </td>
<td> Sistemas <input type="hidden" value="Sistemas" class="departamento" /> </td>
<td>
<input type="hidden" value="25 de Mayo 2005" class="fecha_ingreso" />
<input type="hidden" value="4" class="nivel" />
<input type="hidden" value="2" class="personas_a_cargo" />
<a class="ver" href="javascript:void(0);"> Ver </a>
</td>
</tr>
<tr>
<td> 10023 <input type="hidden" value="10012" class="legajo" /> </td>
<td> Barney <input type="hidden" value="Barney" class="nombre" /> </td>
<td> Gomez <input type="hidden" value="Gomez" class="apellido" /> </td>
<td> Recursos humanos <input type="hidden" value="Recursos humanos" class="departamento" /> </td>
<td>
<input type="hidden" value="25 de Mayo 2010" class="fecha_ingreso" />
<input type="hidden" value="2" class="nivel" />
<input type="hidden" value="0" class="personas_a_cargo" />
<a class="ver" href="javascript:void(0);"> Ver </a>
</td>
</tr>
</tbody>
</table>
<div id="datos_empleado"></div>
</body>
</html>
Como verán la función mostrarDatosEmpleado() levanta los links con la class «ver» y les aplica un evento click() que buscará para arriba con el método .parents() a la etiqueta padre tr y una vez localizada la misma bajará con el método .find() recuperando así todos los valores de los input hidden por su class.
Anterior: JQuery, parte 7: Relaciones entre elementos. Métodos: .parent(), .append(), .remove()
Siguiente: JQuery, parte 9: Animaciones
Excelente y bien explicado!
Gracias, Oscar.
Saludos!