Seleccionar <img> según su valor.

kamasaki · #1 (**permalink**) 17/07/2011, 04:10

Buenas, en jquery sé perfectamente seleccionar etiquetas img por medio del selector $('img').

Pero quisiera seleccionar esas etiquetas según su valor, por ejemplo tengo etiquetas img donde le doy como src a por ejemplo "../imagenes/midibujo.jpg". ¿hay alguna manera de seleccionar etiquetas img según contengan el archivo src que quiero? El libro que tengo de jquery es muy básico y googleando me da a páginas que dicen otra cosa. Agradecería tremendamente su ayuda. un saludo.

Naahuel · #2 (**permalink**) 17/07/2011, 11:49

La documentación en el sitio de jQuery es bastante completa. Acá tenés un resumen de selectores:

http://api.jquery.com/category/selectors/

En jQuery podés seleccionar de acuerdo al valor de un atributo sin problemas. En este caso te interesa el atributo "src". Mirá este ejemplo:

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    $(window).load(function(){
      $('img[src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"]').animate({
        margin:20,
        width:500
      });
    });
  </script>
</head>
<body>
  <p>  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" /></p>
    <p>  <img src="  http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Homer_Simpson_in_Cerne_Abbans.JPG/220px-Homer_Simpson_in_Cerne_Abbans.JPG" /></p>
 
</body>
</html>

Como verás sólo se selecciona la imagen con el atributo src especificado.

kamasaki · #3 (**permalink**) 18/07/2011, 02:05

muchas gracias, amigo!!!
mas claro, agua! me pondré a empollar el link.

un saludo.

kamasaki · #4 (**permalink**) 19/07/2011, 11:33

ufff, más quebraderos de cabeza, a ver...
quisiera que localizara a través del src el nombre del archivo sin saber el directorio.

Tengo esto:

Código HTML:

 <div> <img src="../imagenes/miarchivo.jpg" /></div>

Por ejemplo pongo:

Código:

var file="miarchivo";
$('img[src="*'+file+'.jpg"').animate({
        margin:20,
        width:500
      });

no funciona de esta manera, supongo que el asterisco * no se usa como comodín, si hay alguna manera de seleccionar sin conocer los directorios. gracias un saludo.

Naahuel · #5 (**permalink**) 19/07/2011, 11:46

Te pongo de nuevo el link:
http://api.jquery.com/category/selectors/

El segundo ahí es:

Cita:

Attribute Contains Selector [name*="value"]
Selects elements that have the specified attribute with a value containing the a given substring.

Es decir, de esa forma lo que pongas en "value" es un substring contenido en el atributo que deseas (en este caso, src). Te repito el ejemplo modificado para que seleccione con el nombre del archivo. Demás está decir que si tenés varias imágenes con el mismo nombre en directorios diferentes, va a seleccionarlas a todas:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
    $(window).load(function(){
      $('img[src*="logo_jquery_215x53.gif"]').animate({
        margin:20,
        width:500
      });
    });
  </script>
</head>
<body>
  <p>  <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" /></p>
    <p>  <img src="  http://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Homer_Simpson_in_Cerne_Abbans.JPG/220px-Homer_Simpson_in_Cerne_Abbans.JPG" /></p>
 
</body>
</html>

Sólo por curiosidad: ¿Por qué querés hacerlo de esta forma? No se me ocurre una buena razón :P

kamasaki · #6 (**permalink**) 19/07/2011, 14:35

AAAAAaarrrghh he puesto el * donde no debía!!!!, gracias por su paciencia.

Te digo porque... estoy haciendo una web donde puedes subir una imagen como avatar, y al lado hay un profile que se actualiza la imagen de tu avatar una vez que lo subas, como la imagen del avatar se guarda en un código basado en el ID del usuario, tengo que actualizarlo sin saber el nombre (o directorio) con un valor que me da php.

Está todo casi hecho, pero está todo escrito con javascript, y estoy pasandolo poco a poco a jquery para optimizar el código.

Cuando termine de colgar la web (para después de verano) estás invitado, gracias nuevamente un saludo.