Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/07/2012, 10:00
Avatar de junihh
junihh
 
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 20 años, 4 meses
Puntos: 7
Capturar todas las urls de background-image con jQuery

Hola señores

Tengo la siguiente lista de objetos en el HTML:

Código HTML:
<div id="catalogo-pages">
	<div style="background-image:url(images/paginas/1.jpg);"></div>
	<div style="background-image:url(images/paginas/2.jpg);"></div>
	<div style="background-image:url(images/paginas/3.jpg);"></div>
	<div style="background-image:url(images/paginas/4.jpg);"></div>
	<div style="background-image:url(images/paginas/5.jpg);"></div>
	<div style="background-image:url(images/paginas/6.jpg);"></div>
	<div style="background-image:url(images/paginas/7.jpg);"></div>
	<div style="background-image:url(images/paginas/8.jpg);"></div>
	<div style="background-image:url(images/paginas/9.jpg);"></div>
	<div style="background-image:url(images/paginas/10.jpg);"></div>
	<div style="background-image:url(images/paginas/11.jpg);"></div>
	<div style="background-image:url(images/paginas/12.jpg);"></div>
	<div style="background-image:url(images/paginas/13.jpg);"></div>
	<div style="background-image:url(images/paginas/14.jpg);"></div>
	<div style="background-image:url(images/paginas/15.jpg);"></div>
	<div style="background-image:url(images/paginas/16.jpg);"></div>
	<div style="background-image:url(images/paginas/17.jpg);"></div>
	<div style="background-image:url(images/paginas/18.jpg);"></div>
</div> 
De la misma necesito guardar en un array todas las url's del background-image. Para tal efecto lo hice con javascript tradicional de la siguiente forma:

Código HTML:
function htmlToString (ob)
{
	return String(ob.outerHTML || new XMLSerializer().serializeToString(ob));
};

var objs = document.getElementById('catalogo-pages').getElementsByTagName('div'), objsUrls = [];

for (var x = 0, xc = objs.length; x < xc; x++)
{
	if ( htmlToString(objs[x]).indexOf('url(') != -1 )
	{
		var url = String(htmlToString(objs[x]).match(/url\([^(]+\)/g));
		objsUrls.push( url.replace(/^url\(["']?/,'').replace(/["']?\)$/,'') );
	};
};
Funciona perfectamente, pero como estoy en proceso de aprender a usar jQuery para adaptarme a los estándares de la oficina, se me ha hecho cuesta arriba lograr lo mismo.

Logré llegar hasta este punto:

Código HTML:
console.log(  $('#catalogo-pages').children().css('background-image').replace(/^url\(["']?/,'').replace(/["']?\)$/,'')  );
Me funciona, pero solo obtengo la url del primer objeto. Cuando intento hacer esto:

Código HTML:
console.log(  $('#catalogo-pages').children()[0].css('background-image').replace(/^url\(["']?/,'').replace(/["']?\)$/,'')  );
Recibo este error:
Cita:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'css'
¿Podrían explicarme cómo hacerlo con jQuery? Según parece, debo desaprender javascript para aprender jQuery.

Muchas gracias de antemano por cualquier idea, enlace o ayuda que me puedan proveer.
__________________
JuniHH
- Mi blog
- Mi portafolio