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>