DOM selection in jquery

Question

Hi,

i have a table, and i did sorting of that. Its execution time bad. I guess this is because of DOM manipulation. /* I m converting to array */

var rows = $table.find('tbody > tr').get(); 


 $.each(rows, function(index, row){     /*then again to 2D array */

   if(($(row).children('td').eq(0).attr('class').indexOf('collapse') != -1 || $(row).children('td').eq(0).attr('class').indexOf('expand') != -1)){ 
    myData.push(myData1);
    myData1 = [];
   }
    myData1.push(row); 
    rowCount++;
    if(rowCount == $(rows).length){ // to assign last group of rows
    myData.push(myData1);
     myData1 = [];

   }
   });

which is the best way to select the DOM elements directly thorough array. Because i am using this many times.

Answer 1

Well, there's one thing you can do right away that will probably increase performance:

You see the loong chain you have to get the class values of the first <td> of the row? You're doing the exact same, loong, chain twice. Try

// then again to 2D array
$.each(rows, function(index, row) {
    var classes = $(row).children('td').eq(0).attr('class')
    if((classes.indexOf('collapse') != -1 || classes.indexOf('expand') != -1)){ 
        myData.push(myData1);
        myData1 = [];
    }
    myData1.push(row);
    rowCount++;
    if(rowCount == $(rows).length){ // to assign last group of rows
        myData.push(myData1);
        myData1 = [];
    }
});

If the $.each() function runs a lot of times, this should save you at least some.

Answer 2

You can also try the hasClass function, and using the :first selector instead of returning all tds and then only taking the first one:

if( ($(row).children('td:first').hasClass('collapse')) || ($(row).children('td:first').hasClass('expand')) {