Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Listar o serializar todas las imágenes de una div

A veces pasa que necesitamos listar o serializar las imágenes que tenemos dentro de un elemento por ejemplo una div o cualquier elemento que tenga una id utilizando jquery, supongamos que tenemos una div con 5 imágenes dentro y queremos obtener el nombre de cada una de ellas por poner un ejemplo.

Por supuesto el numero de imágenes puede ser dinámico es decir no tienen por que ser 5 como en el ejemplo así que ten en cuenta que esto funciona con la cantidad de imágenes que sea. Recuerda que puedes obtener tanto el src de todas las imágenes como el alt etc, solo tendrías que hacer una pequeña modificación en el código que de hecho solo tienes que descomentar.

Vamos a obtener un listado de todas las imágenes que hay dentro de esta div, ejemplo completo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script>
function listar_imagenes(){
    
    cantidades=$("#contenido img").length-1;
    cadenanueva='';
    for (i = 0; i <= cantidades; i++) {
        
        //obtener src
        //var str = $("#contenido img:eq("+i+")").attr('src');
        //obtener alt
        var str = $("#contenido img:eq("+i+")").attr('alt');


        var pieces = str.split("/");
        var nombre=(pieces[pieces.length-1]);

        cadenanueva+='alt:' + nombre+' <br>';
    }

        $('#respuesta').html(cadenanueva);

}
</script>


<div id="contenido">
    <img src="http://i.imgur.com/PRHcr51.png" alt="nombre1.jpg">
    <img src="http://i.imgur.com/PRHcr51.png" alt="nombre2.jpg">
    <img src="http://i.imgur.com/PRHcr51.png" alt="nombre3.jpg">
    <img src="http://i.imgur.com/PRHcr51.png" alt="nombre4.jpg">
    <img src="http://i.imgur.com/PRHcr51.png" alt="nombre5.jpg">
</div>

<div>
    <input type="button" value="Listar imagenes" onclick="listar_imagenes();">
    <div id="respuesta"></div>
</div>
para obtener los src solo tienes que cambiar esto:
var str = $("#contenido img:eq("+i+")").attr('alt');
por esto:
var str = $("#contenido img:eq("+i+")").attr('src');
Demo
Editado
2
Puntos
0
Resp
333
Visitas
Por alber hace 11 meses
Administrador offline

Relaccionados

Para comentar Inicia sesión o Registrate