sábado, 15 de marzo de 2014

El selector :contains de jQuery selecciona elementos que contienen un texto determinado. El texto buscado puede aparecer directamente en el elemento de la selección o en alguno de sus descendientes.

Vamos a poner un ejemplo. Imaginemos que tenemos un formulario con un elemento <select>, y queremos mediante jQuery seleccionar uno de los elementos del <select>. El <select> no tiene values en sus options, por lo que solo los podemos identificar por el texto que contiene.

<select id="calidad" name="calidad">
<option>Buena</option>
<option>Normal</option>
<option>Mala</option>
</select>

Para hacer la selección del la opción "Normal" podríamos utilizar el siguiente código.

$("#calidad option:contains('Normal')").attr("selected", true)


El selector tiene la limitación de ser case-sensitive, por lo que distingue entre mayúsculas y minúsculas. Si en el ejemplo anterior hubiéramos utilizado :contains('normal') no hubiera funcionado.

Puede que en algunos casos nos interese que este selector no sea case-sensitive, para cambiar el funcionamiento del selector podemos sobre-escribir la función de jQuery de la siguiente forma:


jQuery.expr[":"].contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});




Categories:

0 comentarios:

Publicar un comentario

Subscribe to RSS Feed