Prototype Selector : simple examples

Question

Hi, 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.

Answer 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.

Answer 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....

Answer 3

This isn't particularly pretty, but if you run into a situation like I did recently, where there could potentially be multiple items with the same id on the page and you don't have the ability to change that, then something like this will work. In my case, I at least knew they were all in span tags.

       var spans = $$('span');
        for (i = 0; i < spans.length; i++) {
           var span = spans[i];
           if (span.id == 'add_bookmark_image_' + id) {
              span.hide();
           }
           if (span.id == 'is_bookmarked_image_' + id) {
              span.show();
           }
        }