Filtros en JQuery

Posted on Actualizado enn


Hola a todos, en post pasados hablamos sobre algunos selectores en jquery (selectores I y selectores II), hoy vamos a revisar como podemos aplicar filtros a dichos selectores.

Un filtro permite restringir la selección de determinado elemento, asi podemos seleccionar solo el primer, el último o un determinado elemento, también podemos seleccionar los pares y los impares entre otros.

Manos a la obra, primero vamos a ver como podemos seleccionar el primer, último y determinado elemento.

  1. Primer elemento: Se hace uso de la palabra first, su sintaxis es: $(“selector:first”); si queremos seleccionar el primer párrafo seria: $(“p:first”)
  2. Ultimo elemento: Como ya habrán adivinado, usamos la palabra last, su sintaxis muy parecida a la anterior es: $(“selector:last”); si queremos seleccionar el ultimo párrafo sería: $(“p:last”)
  3. Determinado elemento: Así como es posible seleccionar el primero y último elemento, también es posible seleccionar un elemento por su posición, para este caso debemos usar la sigla eq(#), donde el # hace referencia a la posición del elemento, para seleccionar el segundo párrafo: $(“p:eq(1)”). No olviden que el primero elemento tiene el índice 0.

Imagen1

Ahora vamos a ver como podemos seleccionar los elementos pares e impares, en este caso, si estan familiarizados con el control GridView de asp.net, sabran que este tiene unos estilos disponibles para que podamosa usar, y que en la mayoria de ellos las filas pares tienen un color y las impares otro..así que la idea es realizar esto mismo pero con jquery.

  1. Elementos pares: Hacemos uso de la palabra clave even, su sintaxis general es: $(“selector:even”), en este caso si queremos seleccionar todas las filas pares de un gridview tenemos: $(“#<% = grvDatos.ClientId %> tr:even”). En este caso vamos que la sintaxis es un poco diferente, así que vamos a detallarla, con el # seleccionamos por id, como el gridview es un control de servidor, cuando este es renderizado en el navegador, su id cambia, es por eso que para cualquier control de servidor usamos <% = idnormal.ClientId %>, donde idnormal es el id que nosotros le definimos, luego el tr, especifica que seleccione todos los tr (filas) del grid, como saben cuando un gridview es renderizado lo que tenemos en el navegador es el html de una tabla, y por último llamamos las filas pares con even.
  2. Elementos impares: Casi igual al anterior, la unica diferencia radica en que aca usamos la palabra odd en lugar de even, la sintaxis seria: $(“selector:odd”), si lo aplicamos al gridview, tendriamos: $(“#<% = grvDatos.ClientId %> tr:odd”).

Imagen2

Por último vamos a revisar, como poder realizar filtros por atributos, aunque los atributos los vamos a ver en un siguiente post,  vamos a decir que un atributo lo que hace es adicionar características a un elemento HTML.

Un atributo lo reconocemos por atributo=”valor”, por ejemplo el atributo id, se usa id=”label1”.

  1. Atributos simples: Selecciona los elementos que tengan definido determinado atributo, la sintaxis general es: $(“selector[atributo]”), por ejemplo, si queremos seleccionar todos los párrafos que tienen asignado un id, seria : $(“p[id]”).
  2. Atributos múltiples: Selecciona los elementos que tengan definidos todos los atributos especificados, la sintaxis general es: $(“selector[atributo1][atributo2][atributon]”), como podemos ver, los diferentes atributos se especifican uno tras otro, cada uno encerrado por unos corchetes cuadrados; si quisiéramos seleccionar los párrafos que tienen un id y un title definido seria: $(“p[id][title]”) .
  3. Atributos con valor: Selecciona los elementos cuyo atributo tenga el valor especificado, la sintaxis general es: $(“selector[atributo=valor]”),  siguiendo con los párrafos, si quisieras seleccionar solo el párrafo que tenda el id=p1, seria: $(“p[id=p1]”).

Imagen3

Espero que este post les sea de utilidad, como siempre les dejo el código del ejemplos utilizado.

Link al ejemplo !!!

About these ads

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s