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.

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:

[codesyntax lang=”javascript”]

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);
	});

[/codesyntax]

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!