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!