Manual jQuery-Métodos Transversales
lunes, 13 de diciembre de 2010
, Posted by edukt at 22:15
Los selectores de jQuery que hemos explorado hasta ahora nos permiten seleccionar un conjunto de elementos como navegar a través y hacia abajo del árbol DOM y filtrar los resultados. Si esta fuera la única manera de seleccionar los elementos, nuestras opciones serían bastante limitadas. Hay muchas ocasiones en la que la selección de un elemento padre es esencial, aquí es donde los métodos de jQuery para el recorrido del DOM entran en juego. Con estos métodos a nuestra disposición, podemos ir hacia arriba, abajo, y en todo el árbol DOM con facilidad.
Para navegar por esa estructura del DOM contamos con métodos como:
next()-Que nos permiten seleccionar el siguiente elemento.
$(document).ready(function() {
$('td:contains(Henry)').next().addClass('highlight');
});
Aplica la clase highlight a las celda siguiente a la que tiene el contenido Henry.
siblings()-Para seleccionar hermanos del elemento pasado como parámetro.
parent()-Selecciona el padre del parametro que se le pasa.
$(document).ready(function() {
$('td:contains(Henry)').parent().children().addClass('highlight');
});
Este comando lo que hace es que selecciona el padre de las celdas que contienen la palabra Henry, que en este caso seria <tr> y luego se seleccionan las filas con el método children().
Algunos de los métodos pueden combinarse de diferente forma para lograr expresiones de selección complejas. Por ejemplo, la línea que utilizó por primera vez para agregar la clase alt, $ ('tr: odd').addClass ('alt'), podría ser reescrito con el método filter () de la siguiente manera:
$('tr').filter(':odd').addClass('alt');
filter() en particular, tiene un enorme poder, ya que puede tener una función como argumento. La función o argumento nos permite crear filtros complejas que permiten seleccionar a que elementos deben de aplicarse la clase alt.
Encadenamiento
En jQuery es posible con una sola linea de código seleccionar varios elementos del DOM y realizarle cambios. El ejemplo de encadenamiento es el siguiente:
$('td:contains(Henry)') // Busca todas las celdas que tienen Henry
.parent() // Selecciona su padre
.find('td:eq(1)') // busca la segunda celda
.addClass('highlight') // Aplica la clase "highlight"
.end() // Regresa a la celda inicial que tiene la palabra henry
.find('td:eq(2)') // Busca la tercera celda
.addClass('highlight'); // Aplica la clase "highlight"
El objetivo del ejemplo anterior es simplemente demostrar la gran flexibilidad que permite el encadenamiento en jQuery.
Currently have 0 comentarios: