jQuery find vs filter

jQuery lo usamos todos los días pero siempre quedan cosas que revisar. Una de las preguntas más habituales que me hacen es la diferencia existente entre usar el método de JQuery find vs  filter .Vamos ha verlo a detalle a traves de un sencillo ejemplo del manejo de una tabla. Supongamos que queremos cambiar de color la última de columna de la tabla. Algo como lo siguiente :

Esta operación en jQuery parece de entrada muy sencilla. Vamos a ver el código fuente de la tabla en HTML.

<table>
<tr>
<td>columna1A</td>
<td>columna2A</td>
<td>columna3A</td>
</tr>

<tr>
<td>columna1B</td>
<td>columna2B</td>
<td>columna3B</td>
</tr>
<tr>
<td>columna1C</td>
<td>columna2C</td>
<td>columna3C</td>
</tr>

</table>

&nbsp;

Usando filter() en jQuery

Parece muy razonable seleccionar la última fila seleccionando los td de la tabla y aplicando filter() sobre el último:

$("tr td").filter(":last").css("background-color","red");

Lamentablemente esto no funciona como nosotros queremos y el resultado será el siguiente:

¿Porque nos ocurre esto? . La respuesta es sencilla la función filter se aplica sobre el grupo de nodos seleccionados y realiza un filtrado adicional quedándonos con el último.

Usando find() con jQuery

Debemos enfocar de otra forma para poder seleccionar la última columna. Para ello vamos a usar el método find() que por nombre parece idéntico a filter() pero que es bastante diferente. En este caso ejecutaremos el siguiente código de Javascript:

$("tr").find("td:last").css("background-color","red");

En este caso seleccionamos de entrada todos los tr  para luego realizar una búsqueda entro de  cada uno de ellos y localizar el último td de cada una de las filas. Por lo tanto la imagen de composición de lugar cambia.

De esta forma podremos seleccionar los elementos de la lista que nosotros queríamos en un principio diferenciando de forma clara el funcionamiento entre filter() y find(). 

Otros artículos relacionados : JQuery WrapperSet , JQuery Contexto ,Ajax y Eventos Globales