Calling jQuery function on page load with multiple elements

Question

I'm working with Volusion and am trying to call a jQuery function on page load. I'm a little new to jQuery so please bear with me. Basically there are '.productnamecolor.colors_productname' items that are wrapped together with a '.pricecolor.colors_productprice' in a div without a selector. There are six on the page and I'm trying to call a jQuery function on all of them. This is all dynamically generated so I'm having to do a little bit of a workaround.

<div>
    <a href="/ProductDetails.asp?ProductCode=WT%2DPeasant" class="productnamecolor colors_productname" title="Peasant Blouse, WT-Peasant"> 
        <span itemprop="name">
            Peasant Blouse
        </span>
    </a>
    <br>
    <div>
        <div>
            <b><font class="pricecolor colors_productprice"><span class="PageText_L483n">view details</span></font></b>
        </div>
    </div>
</div>

So what I'm trying to do is add an anchor tag to the ('.pricecolor.colors_productprice') element with the same href attribute as the corresponding productnamecolor. I don't know how to call this on 'page load' though. The .load() function doesn't seem to work this way. I was going to write a function and call it on page load but I need to use the $(this) property since there are six of these elements on the same page. Here's what I've written out (be aware that the 'load' is wrong but it's as far as I've gotten):

$('.productnamecolor.colors_productname').load(function(){
var link = $(this).attr('href');
$(this).parent().find('.pricecolor.colors_productprice').wrap('<a href="' + link + '">');
});

Thanks for your help!

Answer 1

$(function () {
    $('.productnamecolor.colors_productname').each(function () {
        var link = $(this).attr('href');
        $(this).parent().find('.pricecolor.colors_productprice').wrap('<a href="' + link + '">');
    });
});