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.