Search code examples
javascriptprototypejscss-selectorssizzle

Multiple CSS Selectors with Prototype

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]')
Solution

  • 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".