Multiple CSS Selectors with Prototype

Question

I'm refactoring some code that currently looks like this:

$$('#wrapper > div').each(function(e){ 
    if((e.id!='header') && (e.id!='footer') && (e.id!='content')){
        // various other stuff here
    }
});

I want to switch the initial selector and check for ID to a single line, something along these lines:

$$('#wrapper > div[id!=header]', '#wrapper > div[id!=content]', '#wrapper > div[id!=footer]')

The multiple selectors aren't working though, each selector on its own works fine though. Not sure if this is a syntax issue or what as the Prototype docs say this should work but as soon as i add extra selectors then none work.

To confirm this works:

$$('#wrapper > div[id!=header]')

And this works:

$$('#wrapper > div[id!=footer]')

but this fails to select either (without throwing an error)

$$('#wrapper > div[id!=header]', '#wrapper > div[id!=footer]')

amended question so it should make more sense now – robjmills May 14 '12 at 13:27 — robjmills, May 14 '12 at 13:27

score 2 · Answer 1 · answered May 14 '12 at 13:37

You can just append the selectors to each other div[attr selector 1][attr selector 2] Please see the following example fiddle.

The problem with your initial attempt. i.e. using commas to separate the selectors, are that they are OR-ing. so even though you specify all three, each of the others will return what the others attempt to exclude.

score 2 · Accepted Answer · answered May 14 '12 at 13:37

2

The two code snippets do radically different things. The equivalent to the top snippet should be this:

$$('#wrapper > div[id!=header][id!=footer][id!=content]')

Your selectors would select all divs that have id, since those that are "footer" will be selected under "not header".

answered May 14 '12 at 13:37

Amadan

191,408
23
240
301

@Amadan, that was seconds, haha – epoch May 14 '12 at 13:40

Multiple CSS Selectors with Prototype

2 Answers2