Recorrer todos los objetos de una capa o del DOM completo con JQuery

Si estáis trabajando con JQuery y estáis creando capas al vuelo o en tiempo de ejecución, es bastante probable que necesitéis saber cuales son esas capas. Para ello JQuery provee de varios métodos para recorrer el array del DOM o en nuestro ejemplo, de una capa (div) en concreto.

jquery
Recorrer el DOM con JQuery

Como decía, en nuestro código, estamos desarrollando un editor de escenarios en el que se pueden añadir tantas imágenes como queramos, estas a su vez tienen una posición x e y, además de la profundidad y un atributo personalizado llamado idImagen. Toda esta información es necesaria guardarla en la base de datos (MySQL) para luego poder volver a cargarla en el momento que se necesite el escenario.

Explicado el por qué del uso que le doy, vamos a ver que el código es de lo más sencillo, ya que el método each realiza todo el trabajo «sucio». Veamos:

var idImagen = 0;
var x = 0;
var y = 0;
var z = 0;
 
 
	$('#escenario > img').each(function(index, elemento){
		idImagen =  $(elemento).attr("idImagen");
		x =  $(elemento).css("left");
		y =  $(elemento).css("top");
		z =  $(elemento).css("z-index");
 
		alert("Imagen: " + idImagen + " coordenada " + x + "."+y +" Profundidad: " + z);
	});

El código JQuery que expongo es bastante sencillo de entender si ya habéis trabajado antes con JQuery, lo que voy a explicar es el funcionamiento del método each y como se trata este tipo de bucle.

Primeramente le decimos a esta función each que vamos a recorrer todos los objetos de tipo img que estén dentro de la capa #escenario, y esta función nos devolverá el índice (index) y el elemento (nombre del objeto)

Lo que hacemos a continuación es bastante intuitivo, tomamos el elemento y lo atacamos según sus propiedades, ya sean atributos o características CSS, da igual, tenemos a nuestra disposición el objeto como si fuera creado en tiempo de diseño.

Finalmente mostramos la información recogida en el alert del final.

Nota: Las pruebas que hice sin indicar el tipo no salieron, es decir, al poner solamente $(‘#escenario’).each(), no me daba error, pero tampoco me devolvía ningún objeto o lo realizaba con un mensaje inesperado para mí. En mi caso necesitaba solo las imágenes, pero entiendo que si necesitáis algún tipo en concreto no tendréis problema y si necesitáis todo, será cosa de probar 😉

Espero que os sirva! Si os ha gustado compartid y dar las gracias! sino os ha gustado comentad en qué podria mejorar.

Gracias de antemano. Un saludo!

Carlos Dk

Apasionado por la enseñanza y el SEO

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.