Question

I am just wondering if someone could explain what the following jQuery script does:

$j('.rc_bottom').each(function () {
    var boxDiv = $j(this).parent();
    if (boxDiv.outerWidth() > 0 && $j(this).css('width') != 'auto') {
        $j(this).css('width', $j('.content', boxDiv).outerWidth());
    }
});

And why it is causing an 8-sec longer page load than Firefox.

To note, I have a lot of divs with rc_bottom defined as follows.

<div class="clearfix mt_5">
    <div class="fl_left">
        <div class="rc_box-rc_blueBtn">
            <div class="buttonwidthbar">
                <div class="rc_blueBtn">
                    <div class="content">
                        <div class="contentPadding clearfix">
                            <div class="rc_top"></div>
                            <a href="<%# GetUrl((TrainingItem)Container.DataItem) %>"><span class="btnspan"><%# GetButtonText((TrainingItem)Container.DataItem)%></span></a>
                        </div>
                    </div>
                    <div class="rc_bottom" style="width: 100%;">
                        <div> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>      

Answer 1

You can optimize your code by reducing the number of dom elements fetched in your code.

var $this;
$j('.rc_bottom').each(function () {
        $this = $j(this);
        if ($this.parent().outerWidth() > 0 && $this.css('width') != 'auto') {
            $this.css('width', $this.prev().outerWidth());
        }
});

Note that inside the loop $j('.content', boxDiv) can be replaced by $j(this).prev() considering your markup which is faster than $j('.content', boxDiv)