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:
Editado
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
Puntos
1556
Visitas
Visitas
0
Resp
Resp
Por alber hace 86 meses
Administrador