Buscar un elemento por su contenido con jQuery

Los selectores de jQuery son una herramienta potente y flexible como pocas en el desarrollo web. Su sintaxis basada en CSS facilita enormemente la labor, hacer todo a base de document.getElementById es muy duro. Sin embargo hay veces que queremos elegir elementos no por su identificador, ni por su clase, ni por su nombre, ni siquiera por un atributo que hayamos rellenado aparte, sino por su contenido.

Para esta labor tenemos el selector :contains. Veamos ejemplos que es la mejor forma de aprender su uso. Tened en cuenta sólo una cosa, :contains nos devolverá todos los elementos cuyo texto interno contiene en alguna parte la cadena que le pasemos. Otro detalle a tener en cuenta: sí es sensible a mayúsculas.

Veamos:

• $(‘:contains(“Mi texto”)’): reconocerá cualquier elemento del texto que incluya en alguna parte “Mi texto”, respetando mayúsculas y minúsculas.
• $(‘a:contains(“nombre”)’): reconocerá todos los enlaces cuyo texto incluya “nombre”.
• $(‘a:contains(“nombre”)’).parent(): seleccionará al padre de un enlace cuyo texto contiene “nombre”, esto es muy útil cuando tienes menús del estilo “<li><a href=…” para seleccionar el elemento <li> y poder por ejemplo añadirle clases.

En otra entrada hablaré de qué hacer para tener funciones similares pero que sólo seleccionen:

• El texto exacto
• Sean no sensibles a mayúsculas y minúsculas