Trying to change product list css

I know this is a little off-topic, i.e. hacking BC with jQuery... but if you can help... I am trying to change the product list css for items displayed in the catalogue. I'm implementing jQuery masonry script to effect a responsive layout for small products with a script removing and adding two classes. The script works fine and I have it all working perfectly (for example here: http://silverster-***-race.dotsilo.com/air-filters), except where the small product list is displayed from a sub-catalogue list ../parentCatagory/childCategory. Here's an example where the list is displayed vertically rather than the intended masonry style: http://silverster-***-race.dotsilo.com/Gauges/srp-gauges

This is the default HTML that BC creates (wrapped with with my own DIV and  ID) :

<div id="items">

<ul class="productList productSmall">

<li id="catProdTd_6742743" class="productItem">

<!-- Some product content here -->

</li>

<li id="catProdTd_6742744" class="productItem">

<!-- Some product content here -->

</li>

</ul>

</div>

I have been able to change the classes (from .productItem to .item .masonry-brick) with jQuery elsewhere on the site (like air filters example and the home page: Home - Japanese Race Supplies).

The jQuery I used to change the classes successfully was this:

$('div#items ul li').removeClass('productItem').addClass('item masonry-brick'); // this script replaces the class .productItem with .item .masonry-brick

My problem seems to be that the sub-catalogue (sub-directory) is ignoring the script. Is there something I'm missing when working with a sub-directory like this? I did look at a pure CSS work around, but it's complicated with Masonry generating its own classes too. Any help or suggestions appreciated.

Thanks. - Simon