Hey guys,

I'm redesigning a template set for different kind of websites. In the past
quite a lot of 'widgets' have been created in the form of prototype Classes
and almost every widget works the same way:
1. get all elements with className 'x'
2. for each element: create a new ClassX
3. ClassX modifies the element or does something else with it

for example for a 'Tabs' class this piece of code is in the dom:loaded
$$('ul.tabs').each(function(list) { new Tabs(list); });

Now i'm fine with that for now but imagine to duplicate the same behavior
for 8 other usages, so 8 other selections are made and JS code is executed
for them.

I would like to know if there's any way to optimize the dom:loaded event.
I'm not having any problems right now, it works just fine but I'm afraid
that if more functionality is added that performance will become a problem.

One of my ideas was to combine the global element selectors into 1 selector
and then apply the correct piece of code by checking if a certain class or
attribute is present on the element like this:
$$('ul.tabs, div.map, input.placeholder, a[rel=external]').each(function
applySomething(e) {
 // if element hasClassName('tabs') then apply tabs functionality etc..
 // more checking for classnames and attributes

Is this a good idea? Do I gain performance when doing this? Are there other
ways to organize this?

All input welcome!


You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to