[jQuery] Optimization Help

2007-08-17 Thread TigeRyan

Someone want to help trim this function down some?  What it does is
take a list of checkboxes and if someone selects ALL it turns off
all the other boxes and checks, if someone selects any other box it
turns off ALL and allows the others to light up.

$('[EMAIL PROTECTED]').click(function()
{
temp = this.id.replace(categoryid,);

if (temp == 0)
{
$('[EMAIL PROTECTED]').attr(checked,);
$('input#categoryid0').attr(checked,checked);
}
else
{
$('input#categoryid0').attr(checked,);

if ($(this).is(:checked))
{
$('input#categoryid'+temp).attr(checked,checked);
}
else
{
$('input#categoryid'+temp).attr(checked,);
}
}
});



[jQuery] optimization help

2007-06-11 Thread Gordon

I am currently working through a script that at the moment works just
fine but where there are some performance bottlenecks that I am trying
to reduce.  It works with acceptible speed when dealing with 40 or so
elements but in practice the system could be dealing with hundreds so
every ms I can scrape off the execution time will help.

There are two sections I am focusing on in particular. One is my
initialization function, the other is part of a loop which processes
elements based on the value of fields contained within.

The loop has the highest optimization priority so I'll start with
that.  Here is my code (with some details missing)

self.handleRange= function (rule)
{
if (!(minVal = parseInt ($(rule.minField).val (), 10))) {minVal 
=
0};
if (!(maxVal = parseInt ($(rule.maxField).val (), 10))) {maxVal 
=
0x7FFF};

//console.log (self.containerItems.not 
('.fxUnSelected').length);
self.containerItems.each (function ()
{
// This line needs optimizing!
thisVal = parseInt ($(rule.valField, this).val (), 10);
if ((thisVal  minVal) || (thisVal  maxVal))
{
// do stuff
}
});
};

self.containerItems is a jQuery selector I run at initialization so I
don't have to keep reselecting all the items I want to work with.

I wanted to rewrite the function as follows:

self.handleRange= function (rule)
{
valFields = $(rule.valField);
if (!(minVal = parseInt ($(rule.minField).val (), 10))) {minVal 
=
0};
if (!(maxVal = parseInt ($(rule.maxField).val (), 10))) {maxVal 
=
0x7FFF};

self.containerItems.each (function ()
{
// This line doesn't work!
thisVal = parseInt (valFields.filter (this).val (), 10);
if ((thisVal  minVal) || (thisVal  maxVal))
{
// do stuff
}
});
};

in my experience I have found that filtering out elements I'm not
interested in from a selection I have already made is considerably
faster than running a new selector to get the elements I want.  My
intent here was to grab all the fields which match the selector
specified in the rule passed to the function (say, '.priceval' for
example) and then in the loop select only the one that was relevent
with this.  Unfortunately, this doesn't seem to work.

If anyone knows what I am doing wrong here I'd appreciate a pointer to
get me going in the right direction.

The other optimization I need is in initialization.  My suspicion here
is that copious use of parseInt is slowing this function down
significantly.

self.computeGridCols= function ()
// Calculate number of columns needed
{
return (self.colCount = Math.floor (container.width () /
self.itemWidth));
};
self.computeGridRows= function ()
// Calculate numer of rows needed
{
return (self.rowCount = Math.floor (container.height () /
self.itemHeight));
};
self.initGrid   = function ()
// Compute a grid layout for movement effects
{
// Container dimensions
self.containerWidth = container.width ();
self.containerHeight= container.height ();
// container padding
self.containerPadX  = parseInt (container.css 
('padding-left'), 10);
self.containerPadY  = parseInt (container.css 
('padding-top'), 10);
// All CSS attributes that affect how much space an item takes 
up
self.itemPadX   = (
parseInt (self.containerItems.css 
('border-left-width'), 10)
+ parseInt (self.containerItems.css 
('border-right-width'), 10)
+ parseInt (self.containerItems.css ('margin-left'), 10)
+ parseInt (self.containerItems.css ('margin-right'), 
10)
+ parseInt (self.containerItems.css ('padding-left'), 
10)
+ parseInt (self.containerItems.css ('padding-right'), 
10)
);
self.itemPadY   = (
parseInt (self.containerItems.css ('border-top-width'), 
10)
+ parseInt (self.containerItems.css 
('border-bottom-width'), 10)
+ parseInt (self.containerItems.css ('margin-top'), 10)
+ parseInt (self.containerItems.css ('margin-bottom'), 
10)
+ parseInt