jquery performance td replace

Question

I need to manipulate a complex table for print.

My code works but on IE it runs for 10 sec (50 rows table)

How can I improve the performance?

I found out that $(item).html(title) takes the most time, how can I avoid this?

Thanks

The Code:

            tblTBLRows.find("td[name=tdTBLTitle]").each(function (i, item) {
            var title = "";
            if ($(item).find("*[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" }
            if ($(item).find("*[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" }
            title += $(item).find("#contTxtTitle").html();
            $(item).html(title).removeClass("tdTBLTitle");
        });

Html: one row example:

 <tr>
    <td>...</td>
    <td name="tdTBLTitle" class="tdTBLTitle txtRight" colid="3">
            <table cellspacing="0" cellpadding="0" class="tblTskTitle"><tbody><tr>
            <td> 
                <span class="icon_24 iconVGray" name="iconForApprove" title="...">&nbsp;</span> 
                <span class="spacer5">&nbsp;</span>
            </td>
            <td class="tdTxtTitle " name="txtTitle">
                <a href="..." class="NoLnk">
                    <div class="contTxtTitle Pointer" id="contTxtTitle">
                        Title1
                    </div>
                </a>
            </td>   
            <td class="tdDescLast" name="txtDescLast">
                <a href="..." class="NoLnk">
                    <div class="contDescLast Pointer" id="contDescLast">
                        Title2
                    </div>
                </a>
            </td>
        </tr></tbody>
        </table>
    </td>
    <td>...</td>
</tr>

Answer 1

An important thing is to cache your jquery object references..

instead of calling multiple times the $(item) do var $item = $(item); and use that like $item.find(..)

Also keep in mind that the * selector is very expensive.

If you know you will be looking for spans or some other specific tag use that instead.
For example $item.find('span[name=iconForApprove]')

Answer 2

I would try using an array to build the string. IE often has very poor performance when concatenating strings.

var buffer = [];
buffer.push("string"); // add a bunch of stuff
var title = buffer.join('');

There is evidence that this doesn't make a big difference, but I recently used this for a huge performance gain in IE 7.

Answer 3

        tblTBLRows.find("#tdTBLTitle").each(function (i, item) {
        var title = "";
        if ($(item).find("*[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" }
        if ($(item).find("*[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" }
        title += $(item).find("#contTxtTitle").html();
        $(item).html(title).removeClass("tdTBLTitle");
})

I'd suggest changing the * (universal selector) to the specific element that you're looking to find, which seems to be span in this example. That way jQuery's only looking at specific element-types, rather than looking at, and evaluating, every element it finds:

        tblTBLRows.find("#tdTBLTitle").each(function (i, item) {
        var title = "";
        if ($(item).find("span[name=iconForApprove]").length > 0) { title += "<b>[" + msgStatusForApprove + "]</b>&nbsp;" }
        if ($(item).find("span[name=iconComplete]").length > 0) { title += "<b>[" + msgStatusCompleted + "]</b>&nbsp;" }
        title += $(item).find("#contTxtTitle").html();
        $(item).html(title).removeClass("tdTBLTitle");
})

I'm not sure, though, how much time this could save you; it might well be a micro-optimisation and, if you're not sure that the elements you want will always be a span , it might not be possible in your situation anyway.