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
