Capturar todas las urls de background-image con jQuery

[junihh]

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:

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.

[quike88]

Hola,

Puedes usar each(), prueba así:

Código Javascript:

$('#catalogo-pages').children().each(function(){
        console.log($(this).css('background-image').replace(/^url\(["']?/,'').replace(/["']?\)$/,''));
    });
 

Saludos!

[junihh]

Hola quike88

Exactamente lo que necesitaba. Desconocía el bucle .each(), de hecho, el error que menciono arriba fué tratando de usar "for" inicialmente. Muchísimas gracias por tu ayuda, me sirvió bastante.