I've got this: $('[EMAIL PROTECTED],[EMAIL PROTECTED]') .after("<img src='images/buttons/button_minus.gif' alt='-' class=\"decrement\" /><img src='images/buttons/button_plus.gif' alt='+' class=\"increment\" />") .next("[EMAIL PROTECTED]'-']").bind('click', false, doPlusMinus) .next("[EMAIL PROTECTED]'+']").bind('click', true, doPlusMinus);
Which works, but the two 'nexts' are adding maybe a second each, if I can get rid of them and get to your code, it'd be fine, but I don't think that you can bind an event to the html added by after: $('[EMAIL PROTECTED],[EMAIL PROTECTED]') .after( $("<img src='images/buttons/button_minus.gif' alt='-' class=\"decrement\" />").bind('click', false, doPlusMinus) ).after( $("<img src='images/buttons/button_plus.gif' alt='+' class=\"increment\" />").bind('click', true, doPlusMinus) ); That doesn't work... although it clocks in at just over a second for 1000 <input>s. I think the added code needs to be a jquery object /node collection, for the bind to 'bind' to. On 8/21/07, Jonathan Sharp <[EMAIL PROTECTED]> wrote: > Sending code via e-mail stinks! > > The basic logic for the after is: > > // Append our images > $(...).after( > // Create a new image element > $('<img src="images/buttons/button_minus.gif" alt="-" > class="decrement" />') > // Bind your click event to it > .bind('click', false, doPlusMinus) > // Add the sceond image element after it > .after( // You may be able to substitue add (to select this element > for this object) for this after call > // Create your element and bind the event to it > $('<img src="images/buttons/button_plus.gif" > alt="+" class="increment" />').bind('click', true, doPlusMinus) > ) > ) > > Cheers, > -js > > > On 8/21/07, Jonathan Sharp <[EMAIL PROTECTED]> wrote: > > > > This can be reduced to this: > > > > $(document).ready(function() { > > function doPlusMinus(event) { > > qty_field = > $(this).parent('td').find('[EMAIL PROTECTED]'); > > var num = $(qty_field).val(); > > $(qty_field).val( num + ( event.data === true ? 1 : (num > 0 ? -1 > : 0)) ); > > } > > > > > > // Find our input fields, append a minus & plus image (create minus > image, add plus image after minus image) > > $('[EMAIL PROTECTED],[EMAIL PROTECTED]') > > .after( $('<img > src="images/buttons/button_minus.gif" alt="-" > class="decrement" />') > > .bind('click', false, doPlusMinus) > > .after( $('<img > src="images/buttons/button_plus.gif" alt="+" > class="increment" />').bind('click', true, doPlusMinus) ) > > ); > > $("table.summarytable tr:even").addClass("odd"); > > }); > > Cheers, > > -js > > > > > > > > > > > > On 8/21/07, seedy <[EMAIL PROTECTED] > wrote: > > > > > > > > > > > You shouldn't need to use the .each > > > > > > $('td > [EMAIL PROTECTED]@type=text]').after('stuff') will > append to all > > > elements that match the selector, no need to go into a loop with each. > > > > > > > > > Dan Eastwell wrote: > > > > > > > > > > > > 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 > [EMAIL PROTECTED]@type=text]"); > > > > addPlusMinus("td > [EMAIL PROTECTED]@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(" images/buttons/button_minus.gif > > > > images/buttons/button_plus.gif "); > > > > }); > > > > } > > > > > > > > function increment(image_button) { > > > > $(image_button).bind("click", function() { > > > > qty_field = > $(this).parent("td").find("[EMAIL PROTECTED]"); > > > > 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("[EMAIL PROTECTED]"); > > > > 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 > > > > > > > > > > > > > > -- > > > View this message in context: > http://www.nabble.com/Iterating-over-1000-items---optimizing-jquery-tf4306183s15494.html#a12258350 > > > Sent from the JQuery mailing list archive at Nabble.com. > > > > > > > > > > > > -- Daniel Eastwell Portfolio and articles: http://www.thoughtballoon.co.uk Blog: http://www.thoughtballoon.co.uk/blog