Very slow function, is there a faster way? (using jQuery 1.4.2)

Question

To perform the following function, at least 3 seconds are required (for 500 rows of the table). Is it possible to make this function faster?

function prepareTable() {
    var groupIndex = 0;
    $("#row tbody tr").each(function(index) {
    // each row gets a unique id
    // remove default css styles for table rows
    // read out hidden value, that stores if row is a group
    var group = $(this).attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value');
    // if it is a group, add special styles to row and remember row index
    if (group == 'true') {
        groupIndex = index;
        $(this).addClass('odd').find("td:first")
            .mouseenter(function() {
                $(this).parent().addClass("swGroupLink");
            })
            .mouseleave(function() {
                $(this).parent().removeClass("swGroupLink");
        });
    } else {
        // make all following rows to children of the previous group found
        $(this).addClass('even child-of-node-' + groupIndex);
    }   
    });
}

Answer 1

I suggest two improvements:

• Cache DOM References
• Work at the table offline

Example

function prepareTable() {
   var groupIndex = 0;
   var $mytable = $('#row'),
       $parent  = $mytable.parent();

   $mytable = $mytable.detach();

   $mytable.find('tr').each(function(index) {
      var $this = $(this);
      var group = $this.attr('id', 'node-'+index).removeClass("odd event").find('td :hidden').attr('value');
// if it is a group, add special styles to row and remember row index
   if (group == 'true') {
       groupIndex = index;
       $this.addClass('odd').find("td:first")
           .mouseenter(function() {
               $this.parent().addClass("swGroupLink");
           })
           .mouseleave(function() {
               $this.parent().removeClass("swGroupLink");
       });
   } else {
       // make all following rows to children of the previous group found
       $this.addClass('even child-of-node-' + groupIndex);
   }   
   });

   $parent.append($mytable);
}

I have added a variable $thisthat caches $(this)in your loop .each(). I also added $mytableand $parent. $mytablestores the element #row, and $parentstores the parent-node from #row. This is because I remove the entire element from the DOM, do the work, and reattach it to the parent.

: http://www.jsfiddle.net/2C6fB/4/

, . -, , . , , asychronous , , setTimeout. , , setTimeout(). → http://www.jsfiddle.net/2C6fB/5/

, "" . , , , .

Answer 2

mouseenter mouseleave , prepareTable, .

 $("#row tbody tr td.trueInPrepareTable")
  .live("mouseenter", function(event){      
               $(this).parent().addClass("swGroupLink");    
    }).live("mouseleave", function(event){      
               $(this).parent().removeClass("swGroupLink");    
    });

, rel, rev title.

    function prepareTableEdit() {
                var groupIndex = 0;
                $("#row tbody tr").each(function(index) {
                     groupIndex = index;
                     $(this).attr('id', 'node-'+ groupIndex ).removeClass("odd even");
                    if($(this).attr('rel') == 'true')
                    {                           
                        $(this).addClass('odd').find("td:first").addClass('trueInPrepareTable');                      }
                    else
                    {
                         $(this).addClass('even child-of-node-' + groupIndex).find("td:first").removeClass('trueInPrepareTable');  
                    }
                });

 }

http://www.jsfiddle.net/raBGq/

Answer 3

I think search is one where all time is lost.

You cannot make a selector of this instead of searching. what is html?