Prototype Selector : simple examples

Question

i'm just starting prototype, i was on jquery before.

I can't find easy examples on the internet about how :

• Selecting all elements having the same id on a page (I'm doing this but it only works for the first element : $('mydiv').hide() )
• Selecting a div that is contained in another div by their id.
• hiding all elements that have myClass class.

Solution 1

As mentioned above you shouldn't have the same ID on a page more then once. Besides being against standards it's a recipe for potential problems since you don't know how your JavaScript will react to it. Uses classes instead.

Selecting all elements having the same id class on a page (i'm doing this but it only works for the first element : $('mydiv').hide() )

Use $$:

$$('.myclass')

Selecting a div that is contained in another div by their id.

Use $$:

$$('div#outer div#inner')

hiding all elements that have myClass class.

Use $$, each(), and hide()

$$('.myClass').each(function(d) {
  d.hide();
});

$$ is your friend.

Solution 2

A few things i would add.

$$('.myClass').each(function(d) {
  d.hide();
});

can be replaced with this:

$$('.myClass').invoke("hide");

Also, be careful with your use of $$, within a page with a large dom it is usually faster to target a parent element with $ and then use select() for your selector

so

$$('div#outer div#inner') etc....

can be rewritten like this:

$('parent_of_inner_and_outer').select('div#outer div#inner') etc....