simple jquery each loop making browser hang

Question

so i'm calling a function in jquery that's looping over a table and determining whether to hide a row based on a hidden form element within each row.

when i run this script, toggling the rows either way, the browser hangs for at least 5 seconds even though there are fewer than 100 rows.

the js looks like this:

$('input.vv').each(function(index) {
        var chk = $(this).val();
        if (chk == "0") $(this).parents("tr").slideToggle(function() {
          tableRows();
        });
      });

and a sample row from the html looks like this:

 <tr class="sortable part item" id="row803">
 <td class="col-check">Interior Fixed Dome Camera Surface Mounted<br />(Panasonic Part No. WV-CW484AS/29)
 <input type="hidden" class="vv" value="50" id="v803" /></td>
  <td class="col-equip cen" id="q803">70</td>
      <td class="col-equip cen" id="s803">50</td>
  <td class="col-equip cen"><div id="bom803|092311-001|15"  />50</div></td>
  <td class="col-equip cen" id="b803"><span class="shipped">20</span></td>
</tr>

the line of jquery.js that firebug refers to is 8449

return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;

i'm stuck (can't link to the live site sorry). firebug may give me a way out of this but i'm unsure how to use it well enough. thoughts anyone? thanks!

It would be useful to know what the tableRows() function does. — matt b
– matt b, Commented Sep 23, 2011 at 16:58
it zebra stripes the visible rows. but commenting it out of the code had no effect on the script. — Alex
– Alex, Commented Sep 23, 2011 at 17:03

Rob W · Accepted Answer · 2011-09-23 17:00:43Z

1

$('input.vv') creates a loop which goes through all input elements, and checks whether they're a part of the vv class.

.parents("tr") loops through all parent nodes, and selects only the <tr> elements.

Then, you call .slideToggle, which creates an effect which requires a significant amount of computing power (at small intervals, CSS style adjustments through JQuery, CSS style parsing by browser). likely to be the main cause

Finally, you're calling tableRows();, which you haven't defined yet.

These operations, on "fewer than 100 rows" requires much computing power.

answered Sep 23, 2011 at 17:00

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

i tried replacing slidetoggle with just toggle and got the same laggy result. also commented out the tableRows() function call with no improvement

Rob W Over a year ago

I have explained your code. To make use of it: Find the cause by hiding a part of the code behind comments (if(example){/*test()*/}).

Alex Over a year ago

yes i understand what my code does; i wrote it. removing the hide action altogether (slidetoggle, toggle, hide, whatever) fixes the problem but obviously now my rows aren't hiding. so i changed the code from slideToggle to toggleClass("hidden"), all fixed. thanks for the help.

Blender · Accepted Answer · 2011-09-23 16:54:23Z

0

Try being a little more specific:

$('input.vv').each(function(index) {
    if ($(this).value == "0") $(this).parent().parent().slideToggle(function() {
      tableRows();
    });
  });

answered Sep 23, 2011 at 16:54

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

simple jquery each loop making browser hang

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related