Los atributos son las diferentes ‘configuraciones’ de los elementos HTML, por ejemplo para img tenemos: alt, src, alt, class, style, etc, para un enlace: title, href, class, id, etc. Vamos a ver como podemos usar JQUERY para filtrar en función de los diferentes atributos.
Selector por atributo :[atributo]
Se accede a los elementos que tienen el atributo, ejemplo:
$('a[title]')
Selecciona solo los enlaces que tienen el atributo title.
Selector por atributo con un valor : [atributo=X]
Funciona igual que el anterior pero solo los que cumplen la condición.
$('a[title='prueba']')
Solo se seleccionan los enlaces con title igual a prueba, hay que tener cuidado con las mayúsculas y minúsculas, ya que las diferencia.
Selector por atributo con un valor distinto :[atributo!=X]
Funciona igual que el anterior, solo que selecciona los que NO cumplen la condición. Cuidado, si no existe también los selecciona.
Selector por atributo que empieza por un determinado texto : [atributo^=’X’]
El funcionamiento es similar a los anterior solo que selecciona los elementos que el atributo empieza por el texto indicado. Al igual que antes es importante saber que las minúsculas son diferentes a las mayúsculas. También es importante conocer que no diferencia entre palabras, y si le indicamos que empiece por prueba, y el title empieza por pruebas, lo seleccionara.
$('a[title^='prueba']')
Selector por atributo que termina por un determinado texto : [atributo$=’X’]
Igual que el anterior, solo que selecciona los que el texto esta al final.
Selector por atributo que contiene un determinado texto : [atributo*=’X’]
Selecciona todos los elementos que el atributo indicado tiene el texto indicado en cualquier lugar del texto.
Combinar diferentes atributos
Podemos generar combinaciones de atributos, para poder seleccionar cualquier elemento. Vamos a ver un ejemplo:
$('a[title="Ejemplo"][id*=ejemplo]').css({"border":"1px solid red"});
Este es un ejemplo de combinaciones de filtros para acceder a un elemento determinado. En este caso, buscamos los enlaces que el title comience por Ejemplo, pero si hay varios, podemos combinarlo con que además, el elemento tenga que tener el atributo id, y que este contenga el texto ejemplo en cualquier lugar.
Ejemplos
<!DOCTYPE html>
<html>
<head>
<title>Selectores o filtros por atributos de elementos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#uno').click(function(){
$('a[title]').css({"border":"1px solid red"});
});
$('#dos').click(function(){
$('a[title="Ejemplo"]').css({"border":"1px solid red"});
});
$('#tres').click(function(){
$('a[title!="Ejemplo"]').css({"border":"1px solid red"});
});
$('#cuatro').click(function(){
$('a[title^="Ejemplo"]').css({"border":"1px solid red"});
});
$('#cinco').click(function(){
$('a[title$="Ejemplo"]').css({"border":"1px solid red"});
});
$('#seis').click(function(){
$('a[title*="Ejemplo"]').css({"border":"1px solid red"});
});
$('#siete').click(function(){
$('a[title="Ejemplo"][id*=ejemplo]').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='uno'>Seleccionar enlaces con title</h1>
<h1 id='dos'>Seleccionar enlaces con title=Ejemplo</h1>
<h1 id='tres'>Seleccionar enlaces con title distinto de Ejemplo</h1>
<h1 id='cuatro'>Seleccionar enlaces cuyo title comienza por Ejemplo</h1>
<h1 id='cinco'>Seleccionar enlaces cuyo title termina por Ejemplo</h1>
<h1 id='seis'>Seleccionar enlaces cuyo title contiene Ejemplo</h1>
<h1 id='siete'>Comnbinación de selectores de atributos: Que tenga title = Ejemplo, y que el ID contenga ejemplo</h1>
<br><br><br>
<a href="">Enlace 1</a><br>
<a href="" title="Enlace 1">Enlace 2: title = Enlace 1</a><br>
<a href="" title="Ejemplo" id="idejemplo-prueba">Enlace 3: title = Ejemplo, id = id-ejemplo-prueba</a><br>
<a href="">Enlace 4</a><br>
<a href="">Enlace 5</a><br>
<a href="">Enlace 6</a><br>
<a href="" title="otro Ejemplo">Enlace 7: title = otro Ejemplo</a><br>
<a href="">Enlace 8</a><br>
<a href="" title="Ejemplos">Enlace 9: title = ejemplos</a><br>
<a href="" title="Ejemplo final">Enlace 10: title = Ejemplo final</a>
</body>
</html>
Deja una respuesta