[jQuery] For Loops vs Each Loops while optimizing efficiency

[jQuery] For Loops vs Each Loops while optimizing efficiency

I have a trac plugin named DynamicFieldsPlugin. My studies show that this piece of code takes the most time. I know there are a lot of each used here. So I need your advice to improve its performance.

Here is my layout.js code:
  1. /*
  2.  * Layout 'class'
  3.  */
  4. var Layout = function(name){
  5.     this.name = name;
  6.     
  7.     // Selector for all field tds/ths
  8.     this.selector = '';

  10.     // Return the given field name's td/th element
  11.     this.get_tx = function(field){}
  12.     
  13.     // Return the given td/th element's field name 
  14.     this.get_field = function(tx){}
  15.     
  16.     // Move a field's tds and ths to slot i
  17.     this.move_field = function(field, i){}
  18.     
  19.     // Update the field layout given a spec
  20.     this.update = function(spec){
  21.         var this_ = this;
  22.         
  23.         // save original field order
  24.         if (window.dynfields_orig_field_order == undefined)
  25.             window.dynfields_orig_field_order = Object();
  26.         
  27.         if (window.dynfields_orig_field_order[this.name] == undefined){
  28.             window.dynfields_orig_field_order[this.name] = [];
  29.             jQuery(this.selector).each(function(i,e){
  30.                 var field = this_.get_field($(this));
  31.                 if (field)
  32.                     window.dynfields_orig_field_order[this_.name].push(field);
  33.             });
  34.         }
  35.         
  36.         // get visible and hidden fields
  37.         var visible = [];
  38.         var hidden = [];
  39.         jQuery.each(window.dynfields_orig_field_order[this.name],
  40.                     function(i,field){
  41.             var tx = this_.get_tx(field);
  42.             if (tx.hasClass('dynfields-hide')){
  43.                 hidden.push(field);
  44.             } else {
  45.                 visible.push(field);
  46.             }
  47.         });
  48.         
  49.         // get new field order
  50.         // warning: side-effects!
  51.         var new_fields = jQuery.merge(visible, hidden);
  52.         
  53.         // order the fields
  54.         this.order_fields(new_fields);
  55.     }
  56.     
  57.     this.order_fields = function(new_fields){
  58.         var this_ = this;
  59.         
  60.         // determine which fields need to move and move 'em!
  61.         jQuery(this.selector).each(function(i,e){
  62.             var field = this_.get_field($(this));
  63.             if (field == ''){
  64.                 var j = -1;
  65.             } else {
  66.                 var j = jQuery.inArray(field, new_fields);
  67.             }
  68.             
  69.             // check if field is in the correct slot in the new order
  70.             if (i != j && i < new_fields.length){
  71.                 // wrong order!
  72.                 this_.move_field(new_fields[i], i);
  73.             }
  74.         });
  75.     }
  76. };


  79. /*
  80.  * Inputs Layout implementation
  81.  */
  82. var inputs_layout = new Layout('inputs');

  84. // selector
  85. inputs_layout.selector = '#properties td[class!=fullrow]:parent';

  87. // get_tx
  88. inputs_layout.get_tx = function(field){
  89.     return jQuery('#field-'+field).parents('td:first');
  90. };

  92. // get_field
  93. inputs_layout.get_field = function(td){
  94.     var input = td.find(':input:first');
  95.     if (!input.length) return '';
  96.     return input.attr('id').slice(6);
  97. };

  99. // move_field
  100. inputs_layout.move_field = function(field, i){
  101.     var td = this.get_tx(field);
  102.     var th = td.parent('tr')
  103.                .find('th label[for=field-'+field+']')
  104.                .parent('th');
  105.     
  106.     // find correct row (tr) to insert field
  107.     var row = Math.round(i/2 - 0.5); // round down
  108.     row += jQuery('#properties td[class=fullrow]').length; // skip fullrows
  109.     var tr = jQuery('#properties tr:eq('+row+')');
  110.     
  111.     // find correct column (tx) to insert field
  112.     var col = 'col'+((i%2)+1);
  113.     if (tr.find('th').length){
  114.         if (col == 'col1'){
  115.             var old_th = tr.find('th:first');
  116.             if (old_th.get(0) != th.get(0)){ // don't move self to self
  117.                 old_th.before(th);
  118.                 old_th.before(td);
  119.             }
  120.         } else {
  121.             var old_td = tr.find('td:last');
  122.             if (old_td.get(0) != td.get(0)){ // don't move self to self
  123.                 old_td.after(td);
  124.                 old_td.after(th);
  125.             }
  126.         }
  127.     } else {
  128.         // no columns so just insert
  129.         tr.append(th);
  130.         tr.append(td);
  131.     }
  132.     
  133.     // let's set col
  134.     td.removeClass('col1 col2');
  135.     th.removeClass('col1 col2');
  136.     td.addClass(col);
  137.     th.addClass(col);
  138. };


  141. /*
  142.  * Header Layout implementation
  143.  */
  144. var header_layout = new Layout('header');

  146. // selector
  147. header_layout.selector = '#ticket .properties th:parent';

  149. // get_tx
  150. header_layout.get_tx = function(field){
  151.     return jQuery('#h_'+field);
  152. };

  154. // get_field
  155. header_layout.get_field = function(th){
  156.     return th.attr('id').slice(2);
  157. };

  159. // move_field
  160. header_layout.move_field = function(field, i){
  161.     var th = this.get_tx(field);
  162.     var td = th.parent('tr').find('td[headers=h_'+field+']');
  163.     
  164.     // find correct row (tr) to insert field
  165.     var row = Math.round(i/2 - 0.5); // round down
  166.     var tr = jQuery('#ticket .properties tr:eq('+row+')');
  167.     
  168.     // find correct column (tx) to insert field
  169.     if (tr.find('th').length){
  170.         if (i % 2 == 0){
  171.             var old_th = tr.find('th:first');
  172.             if (old_th.get(0) != th.get(0)){ // don't move self to self
  173.                 old_th.before(th);
  174.                 old_th.before(td);
  175.             }
  176.         } else {
  177.             var old_td = tr.find('td:last');
  178.             if (old_td.get(0) != td.get(0)){ // don't move self to self
  179.                 old_td.after(td);
  180.                 old_td.after(th);
  181.             }
  182.         }
  183.     } else {
  184.         // no columns so just insert
  185.         tr.append(th);
  186.         tr.append(td);
  187.     }
  188. };
I will happily give more information about this issue. Please help.