Filtrar elementos con jQuery: Uso del método filter()

jQuery

Es muy probable que se dé la situación de filtrar elementos con jQuery. Es bastante común tener un grupo de elementos y filtrarlos para poder realizar cambios, ya sea en el DOM o sobre ellos mismos. En este post explicaré cómo podemos filtrar elementos con jQuery con la función filter().

El método filter() nos permite filtrar un set de elementos. Acepta como argumento un selector aunque también podemos emplear una función anónima si queremos filtrar por atributos o realizar un cotejo más específico.

Para el ejemplo vamos a partir de un grupo de enlaces, algunos tendrán la clase ‘externo’ y uno de ellos tendrá una URL.

XHTML
1
2
3
4
5
6
<a href="https://guidacode.com">Vinculo 1</a>
<a href="#" class="externo">Vinculo 2</a>
<a href="#">Vinculo 3</a>
<a href="#" class="externo">Vinculo 4</a>
<a href="#" class="externo">Vinculo 5</a>
<a href="#">Vinculo 6</a>

Justo debajo estos vínculos tendremos una etiqueta script con el código jQuery para realizar los siguientes filtrados. Vamos a empezar con algo sencillo, contar cuantos vínculos tienen la clase externo.

JavaScript
1
2
3
4
5
<script>
$(document).ready(function() {  
alert($('a').filter('.externo').length + ' enlaces con la clase externo links');
});
</script>

Mostramos el resultado en un alert. En el alert seleccionamos todos los vínculos con $(‘a’) . Sobre esa selección usamos el método filter() con la clase ‘externo’ como argumento. Esto devolvería un conjunto de elementos que contamos con el atributo length.

Ahora vamos a probar a cambiar de color los vínculos pares. Podemos emplear la pseudo-clase :even.

JavaScript
1
2
3
4
5
<script>
$(document).ready(function() {  
$('a').filter(':even').css("color", '#207FC0');
});
</script>

Con filter(), ya obtenemos todos los enlaces y ya hacemos sobre ellos el cambio de estilo. Si eres un poco nuevo en jQuery, te recomiendo que veas este post donde hablo del chaining que es lo que estamos realizando.

Filtrar elementos por atributo

Para filtrar por atributo en jQuery podemos emplear una función anónima dentro de filter(). También podríamos filtrar por valor o por el texto que contiene pero, seguramente filtrar por atributo sea lo que más se suele necesitar.

Para el siguiente ejemplo lo que vamos hacer es saber que vinculo tiene en su atributo href la palabra «guidacode».

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script>
$(document).ready(function() {  
var guidacode = $('a').filter( function(index){
if ($(this).attr('href').indexOf('guidacode') != -1)
return true;
});
 
if(guidacode != null)
alert('El enlace que contiene la url a guidacode es: ' + guidacode.text() );
});
</script>

La variable guidacode va a contener el enlace que contenga ‘guidacode‘. En ella usamos filter con la función anónima con el parámetro index, que no se usa pero podríamos saber en qué índice está el elemento que estamos recorriendo en ese instante. Dentro de la función anónima nos referimos al elemento que estamos recorriendo con $(this) y con indexOf() buscamos si la búsqueda del string ‘guidacode’ es diferente a -1 (que se encontró). De ser así devolvemos true. Básicamente, con return true estamos diciendo: Sí, mete este elemento en el conjunto de elementos filtrados.  Finalmente, sólo sacamos por alert el text del enlace.

Si por ejemplo, obtuviésemos varios elementos en la variable guidacode, para poder acceder a uno en concreto lo haríamos como si fuese un array

JavaScript
1
guidacode[0].text()

Y hasta aquí cómo filtrar elementos con jQuery, espero que os sirva de ayuda. A seguir picando 🙂