Diferencia entre Find y Filter en jQuery

15 07 2009

jquery_thumbEs muy común confundirse entre estos dos métodos al comenzar con jQuery, pero ambos realizan tareas muy distintas.

Mientras .filter quita, de los elementos contenidos en el objeto $, los que no cumplan con el selector que se le indica, .find busca en los descendientes de los objetos seleccionados.

$("div.nav").find("a") Encuentra los links dentro de cualquier div con la clase css nav, en cambio:

$("a").addClass(".link").filter("[href^=http://]").addClass(".externo"); Agrega la clase “link” a todos los <a> y la clase “externo”, solo a los que poseen una valor para el atributo href que comienza con “http://”, Este es otro ejemplo clásico de jQuery. (Los corchetes se utilizan para buscar en atributos del HTML y el ^ indica el que la cadena buscada debe estar al comienzo del valor del atributo.)

En general .filter se utiliza para trabajar con un subconjunto de otro conjunto sobre el ya realicé una acción, permitiéndonos encadenar varias sentencias en una como en el ejemplo.

En cambio .find es un método muy poderoso que me sirve para navegar dentro del DOM por relaciones “descendiente de” entre elementos. Buscará en los elementos descendientes de los contenidos en $, sin tener en cuenta estos últimos.

Por ejemplo, dado:

<div id="padre">
   <div id="hijo1">
      <div id="nieto1"></div>
   </div>
   <div id="hijo2"></div>
</div>

$("#padre").find("div") Encuentra “hijo1”, “hijo2” y “nieto1”, (y no el div “padre” contenido en el objeto $.)

Este tipo de métodos denominados “transversales”, son los que nos ampliarán el campo de acción cuando excedamos las posibilidades de los selectores.

¡Hasta pronto!

Anuncios

Acciones

Information

4 responses

17 07 2009
Spartan-Code» Blog Archive » Diferencia entre Find y Filter en jQuery

[…] nos ampliarán el campo de acción cuando excedamos las posibilidades de los selectores.Visto en varioNet This entry was written by Pirata21 and posted on July 17, 2009 at 2:13 pm and filed under […]

5 01 2010
Willowman

Muy buena explicación! Saludos!

5 01 2010
Alejandro Hernández

¡Gracias Willowman!

15 04 2010
Spartan Code – Blog » Diferencia entre Find y Filter en jQuery

[…] nos ampliarán el campo de acción cuando excedamos las posibilidades de los selectores.Visto en varioNet This entry was posted on Friday, July 17th, 2009 at 2:13 PM and is filed under jquery. You can […]

Responder

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




A %d blogueros les gusta esto: