jQuery / Metodos transversales DOM

Bienvenidos sean a este post, hoy veremos un tema mas avanzado sobre los selectores.

Hasta ahora hemos visto como manejar a traves y hacia abajo en el arbol de DOM y filtrar sus resultados pero en algunas ocasiones necesitaremos seleccionar un elemento ancestral o pariente y hay entran en accion los metodos del titulo dado que gracias a ellos podremos recorrer en cualquier sentido el arbol del DOM. en el post anterior vimos como aplicar una clase a las lineas de una tabla que sean impares, la linea era la siguiente:

$('tr:even').addClass('alt');

Y a esta le podemos a aplicar la funcion filter de la siguiente manera:

$('tr').filter(':even').addClass('alt');

Esto hace exactamente lo mismo pero es mejor porque tendremos una mayor flexibilidad para trabajar mediante el filter, ya que este acepta como argumento a una funcion, pero antes de continuar vamos a descargar el codigo que usaremos:

Estos archivos extraiganlos en un directorio, una vez deben descargar el siguiente archivo y el ccontenido extraerlo en el mismo directorio que extrajeron los archivos anteriores

El directorio de trabajo debera quedar con los siguientes archivos

codigo.js
estilo.css
external.png
personal.html

Este codigo lo comentamos en el post anterior, nuestro siguiente paso sera realizar algunas modificaciones en el archivo personal.html, para ello iremos a la tabla de listado de juegos y modificaremos las siguientes celdas:

	<tr>
	<td>Uncharted 2</td>
	<td>Accion</td>
	<td>2009</td>
	</tr>

De la siguiente manera:

	<tr>
	<td><a href="/uncharted2/">Uncharted 2</a></td>
	<td>Accion</td>
	<td>2009</td>
	</tr>

Simplemente agregamos un nuevo link para el juego en esta celda, nuestra siguiente modificacion sera en estas celdas:

	<tr>
	<td>God of War</td>
	<td>Accion</td>
	<td>2018</td>
	</tr>

De la siguiente manera:

	<tr>
	<td><a href="https://www.playstation.com/es-ar/games/god-of-war/">God of War</a></td>
	<td>Accion</td>
	<td>2018</td>
	</tr>

Con esto tendremos dos lineas de la tabla con enlaces, siendo uno «local» y el otro uno de Internet nuestro siguiente paso sera modificar el archivo estilo.css donde agregaremos el siguiente segmento de codigo:

a
{
	color: #00c;
}
a.external
{
	background: url(external.png) no-repeat 100% 2px;
	padding-right: 16px;
}

El primero es para setear el color de los enlaces, despues estableceremos una nueva clase que utilizara la imagen que le agregamos y dibujara un marco alrededor del enlace, nuestro siguiente paso sera ir al archivo codigo.js donde dentro del bloque del ready agregaremos la siguiente linea:

	$('a').filter(function(){
		return this.hostname && this.hostname != location.hostname;
	}).addClass('external');

Esto seleccionara todos los enlaces que tengamos pero gracias a filter por medio de la funcion anonima lo seleccionado sera unicamente los enlaces que no posean el mismo dominio que la pagina, es decir enlaces externos y a su vez tambien excluira enlaces de tipo mail, esto lo hace a traves de la iteracion de cada uno de los elementos que realiza jQuery por lo tanto analizara cada uno y en caso de cumplirse la verificacion procede a aplicar la clase, veamos como quedo nuestra pagina hasta ahora

Observen como el primer enlace por ser «local» no le aplico la nueva clase pero si lo hizo con el segundo enlace, no se preocupen esto es solo una introduccion a filter proximamente ahondaremos un poco mas sobre esta funcion, ahora vamos a ver como seguir trabajando con los estilos de las celdas, para ello volvamos al archivo codigo.js y dentro del ready agreguemos la siguiente linea:

	$('td:contains(Sonic)').next().addClass('resaltar');

Esto buscara todas las columnas de la tabla que tengan la palabra Sonic, y en cada uno de ellos por medio de next aplicara la clase resaltar a la siguiente columna en lugar de la buscada, recarguen la pagina para ver como quedo

Pero si a la linea anterior la cambiamos de la siguiente manera:

	$('td:contains(Sonic)').nextAll().addClass('resaltar');

En este caso aplicamos a nextAll, el cual en lugar de aplicar la clase a la columna siguiente lo hara en todas las restantes, recarguen la pagina y se deberia ver de la siguiente manera

Por supuesto tambien tenemos unas funciones opuestas a estas como son prev y prevAll las cuales aplicaran al elemento previo y los elementos previos respectivamente, tomemos la linea anterior y cambiemosla de la siguiente manera:

	$('td:contains(Sonic)').nextAll().addBack()
	.addClass('resaltar');

Es similar a la anterior pero le agregamos la funcion addBack para que tambien aplique la clase al elemento anterior, en este caso la columna del elemento en cuestion, veamos como quedo ahora

Como pueden ver hay varias formas de como desplazarse a traves del arbol de DOM, pero tambien tenemos otra opcion y para ello cambien la linea anterior por la siguiente:

	$('td:contains(Sonic)').parent().children()
	.addClass('resaltar');

En este caso le decimos que tanto el elemento padre como los hijos de lo que busquemos se le aplique la clase resaltar, si recargan la pagina deberia quedar exactamente igual que antes, con esto ya cubrimos como movernos por los distintos elementos del arbol del DOM pero a su vez tenemos otra opcion interesante como es el encadenamiento.

Cuando nos referimos a encadenamiento es la posibilidad de tomar varias de las acciones anteriores y utilizarlas en un mismo llamado, esto no solamente hara que tengamos un codigo mas conciso sino que tambien puede influir en la performance de nuestro llamado, para ello vamos a tomar la linea anterior y vamos a cambiarlo por el siguiente segmento:

	$('td:contains(Sonic)')
	.parent()
	.find('td:eq(0)')
	.addClass('resaltar')
	.end()
	.find('td:eq(2)')
	.addClass('resaltar');

Observen que en este caso primero aplicamos el contains en las columnas para buscar las que contengan a Sonic, volvemos a usar a parent para que tome al elemento padre, despues por medio de find le diremos que busque la primer columna unida a este padre/pariente y le aplique la clase resaltar, observen que aplicamos el metodo para que finalice esta tarea pero luego volvemos a usar a find pero en este caso para que busque la tercer columna, y le vuelva a aplicar la clase resaltar, esto podriamos repetirlo todas las veces que necesitemos para otros elementos de este padre, si lo almacenan y recargan la pagina se vera de la siguiente manera

Aqui podemos ver como se aplico unicamente a las columnas que le pedimos buscar, si bien puede ser practico para aplicar en un codigo mas conciso, si encadenamos muchos metodos puede resultar confuso para otra persona o inclusive para nosotros despues de cierto tiempo, una recomendacion de una buena practica es utilizarlo en lineas como el ejemplo y a su vez comentarla para recordar que hacia cada una, antes de pasar al ultimo tema veamos como quedo codigo.js:

$(document).ready(function()
{
	$('tr:nth-child(odd)').addClass('alt');
	$('td:contains(War)').addClass('resaltar');
	$('a').filter(function(){
		return this.hostname && this.hostname != location.hostname;
	}).addClass('external');
	$('td:contains(Sonic)')
	.parent()
	.find('td:eq(0)')
	.addClass('resaltar')
	.end()
	.find('td:eq(2)')
	.addClass('resaltar');
});

Por ultimo mencionaremos como acceder a elementos DOM, hasta aca podemos decir que todas las expresiones de los selector y la mayoria de las funciones/metodos de jQuery nos devuelven objetos de tipo jQuery, esto es algo que queremos la mayoria del tiempo principalmente por el tipo de iteracion que hemos estado viendo hasta ahora al igual que el encadenamiento mencionado anteriormente, pero en algunas situaciones debemos poder acceder a un elemento DOM, por ejemplo necesitamos poder dar disponibilidad de un conjunto de elementos a otra libreria de Javascript o simplemente acceder a una serie de elementos por el atributto tagname, para estas situaciones jQuery nos provee una funcion denominada get, analicemos la siguiente linea de ejemplo:

var ej = $('#mis-elementos').get(0).tagName;

En este caso si tenemos varios elementos identificados con ese nombre primero lo seleccionaremos y luego por medio de get le diremos que almacene el tagname del primer elemento de esta lista si queremos cambiar el elemento simplemente modificamos el indice de busqueda, aunque jQuery tambien nos ofrece una abreviatura para esta funcion:

var ej = $('#mis-elementos')[0].tagName;

Simplemente pasamos la posicion entre los corchetes, despues el resto es de la misma forma, esta no deja de ser otra forma de seleccionar nuestros elementos pero por un atributo particular, por ultimo les dejo un archivo con el codigo final de este ejemplo:

En resumen, hoy hemos visto varios metodos para atravesar el arbol de DOM, ya sea de una forma directa, como hacerlo por medio de un filtro, de otras formas para trabajar con los posteriores y anteriores, asi como tambien los padres e hijos de estos, como es el encadenamiento y por ultimo una funcion que nos permite obtener un elemento a traves de un atributo de este, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50