[jQuery] Iterating over 1000 items - optimizing jquery
Hi,
I'm doing an order form for a bookstore. The order form has over 500
items in it, so jquery runs slowly.
There is no way I can change the number of items, it's a given and a
piece of business 'logic'.
The jquery I have comprises four simple functions to add
increment/decrement buttons to the order form to increase quantities,
and a jquery addClass call to add pajama/zebra stripes to the table.
There are two quantity fields (again for business reasons), so that's
over a 1000 items.
http://test2.danieleastwell.co.uk/test2/master_order_test.html
The problem is it causes a 'script hanging' error IE7 on, I'm
guessing, slower machines (not mine), and takes ~10secs in Firefox2
(with firebug/validation tools) to load.
Is there any way I can optimize this to load any more quickly, or do I
need to give up on scripting to add the items and their functionality?
Many thanks,
Dan.
$(document).ready(function() {
addPlusMinus("td input[@name=paid_qty][@type=text]");
addPlusMinus("td input[@name=free_qty][@type=text]");
increment("#order_form img.increment");
decrement("#order_form img.decrement");
$("table.summarytable tr:even").addClass("odd");
});
function addPlusMinus(input_text){
$(input_text).each( function(){
$(this).after("<img src='images/buttons/button_minus.gif' alt='-'
class=\"decrement\" /><img src='images/buttons/button_plus.gif'
alt='+' class=\"increment\" />");
});
}
function increment(image_button) {
$(image_button).bind("click", function() {
qty_field = $(this).parent("td").find("input[@type=text]");
var numValue = $(qty_field).val();
numValue++;
$(qty_field).val(numValue);
});
}
function decrement(image_button) {
$(image_button).bind("click", function() {
qty_field = $(this).parent("td").find("input[@type=text]");
var numValue = $(qty_field).val();
if (numValue > 0 ) {
numValue--;
}
$(qty_field).val(numValue);
});
}
--
Daniel Eastwell
Portfolio and articles:
http://www.thoughtballoon.co.uk
Blog:
http://www.thoughtballoon.co.uk/blog