jQuery: comodines para los selectores

Una de las comodidades de jQuery es la versatilidad que nos da a la hora de trabajar con diversos selectores. Lo que muchos no saben, o lo intuyen pero no lo tienen claro, es que existen diversos comodines para usar los selectores de jQuery. Vamos a verlos:

Seleccionar por un prefijo: Tenemos la posibilidad de usar un selector que actúe sobre los elementos que tengan un atributo cuyo valor sea igual a la cadena que le pasemos, o que empiecen por esa cadena seguida de un guión. La sintaxis sería tal que así: jQuery( “[attribute|=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="pepe">Some text</div>
<div id="pepe-paya">Some other text</div>
<div id="pepote">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id|='pepe']" ).hide();
</script>

Seleccionar por un fragmento de una cadena: Con esta opción lo que buscaríamos sería un fragmento de texto dentro del valor del atributo, en cualquier posición. La sintaxis sería tal que así: jQuery( “[attribute*=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepepaya">Some other text</div>
<div id="pepote">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id*='pepe']" ).hide();
</script>

Seleccionar por una palabra aislada concreta: El título es un pelín confuso, lo se, pero te lo explico. Con esta opción buscaríamos dentro del atributo una palabra concreta, que puede estar delimitada por espacios o ser el valor único del atributo. La sintaxis sería tal que así: jQuery( “[attribute~=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casa pepe">Some text</div>
<div id="pepe">Some other text</div>
<div id="pepepaya">Some text</div>
 
<script>
//oculturía los dos primeros divs y dejaría el tercero
$( "div[id~='pepe']" ).hide();
</script>

Seleccionar por el final del atributo: En este caso lo que hacemos es buscar los elementos con un atributo cuyo valor termine con la cadena que le pasamos. La sintaxis sería tal que así: jQuery( “[attribute$=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepemola">Some other text</div>
<div id="elpepepaya">Some text</div>
 
<script>
//oculturía el primer div y dejaría los otros dos
$( "div[id$='pepe']" ).hide();
</script>

Seleccionar por el principio del atributo: En este caso lo que hacemos es buscar los elementos con un atributo cuyo valor comience con la cadena que le pasamos. La sintaxis sería tal que así: jQuery( “[attribute^=’value’]” )
Lo vemos mejor con un ejemplo:

<div id="casapepe">Some text</div>
<div id="pepemola">Some other text</div>
<div id="elpepepaya">Some text</div>
 
<script>
//oculturía el segundo div y dejaría los otros dos
$( "div[id^='pepe']" ).hide();
</script>
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s