jQuery #id.classname selector on IE7

Question

So the honest truth is that I don't even know what terms I'd search for to get a reasonably targeted search result for this, so I thought I'd hope for a quick response here. The searches I've tried (including SO's related questions) haven't mentioned this particular issue.

Every browser in my arsenal understands the following jQuery selector and alerts the proper length (2):

alert( jQuery('#course-contents.course-sidebar .folder').length );

But not IE7. It tells me there are zero. On the other hand, this:

alert( jQuery('.course-sidebar .folder').length );

Gives me a result of 2 in both places. What is it about the combination that is giving IE7 fits? Both components are necessary in some places, so I don't want to just change it. If my syntax is wonky, I'd like to know why.

Thanks.

Answer 1

The first on is of course a more strict selector : only classes under the ID tag are taken in account, this is not supported by IE7 (or IE6 for that matter)

The second selector is about all children of class course-sidebar, regardless where they appear.

Indeed, IE has an issue with the #ID.class selector :

http://bytesizecss.com/blog/post/the-idclass-selector-in-ie6

http://csscreator.com/node/26521

http://code.google.com/p/ie7-js/issues/detail?id=29

Answer 2

It is a documented IE6/7 bug (again...), as @Peter suggested.

For a workaround, you might use

jQuery('.course-sidebar')
    .filter('#course-contents')
    .find('.folder')
    .length

or (using context, less readable)

jQuery('.folder', jQuery('.course-sidebar').filter('#course-contents')).length