jquery selectors problem and efficiency

Question

Hi I have a problem(not exactly problem, I have solved it, but it is at least very interesting) with differet bahaviour of jquery selectors in IE(7-8) mobile Opera, and other browsers.. Here is my example

<div id="galleryEl"><link href="http://designclub.cz/plugins/content/plugin_jw_sig/sig.css" rel="stylesheet" type="text/css">
                <style type="text/css">.sig_cont {width:30px;height:20px;}</style>
                <script type="text/javascript" src="http://designclub.cz/plugins/content/plugin_jw_sig/mootools.js"></script>
                <script type="text/javascript" src="http://designclub.cz/plugins/content/plugin_jw_sig/slimbox.js"></script>
                <div class="sig"><div class="sig_cont"><div class="sig_thumb"><a href="http://designclub.cz/images/stories/hp/hp-falper.jpg" rel="lightbox[sig0]" title="&lt;b&gt;hp-falper.jpg&lt;/b&gt;" alt="hp-falper.jpg" target="_blank"><img src="http://designclub.cz/plugins/content/plugin_jw_sig/showthumb.php?img=hp/hp-falper.jpg&amp;width=0&amp;height=0&amp;quality=0">

Sorry about the formatting:)

The problem is following..When I use this selector jQuery("#galleryEl.sig_thumb a").eq(index); (index is really an integer) in major modern browsers it just works.. but in IE(7-9) (6 ia haven't tested) it doesn't..When I look into IE developer console, it looks like the result object is some kind of plain dom object???I am really not sure, not so skilled in js, but it seems so:) When I change the jQuery(".sig_thumb a").eq(index); it selects the right dom element..The markup is so weird because of it's a joomla plugin, I am using it to dynamicaly creating background slideshows accroding to folder structure..So does anybody know wherefrom comes this weird behaviour? And second question..I really want to make it efficient, so which kind of selector is the best one in this case?I know that when selecting over id, jQuery uses js native method, the same in case of tagName and so on, but I am really not sure how about the combinations if this selectors(whether is better to use id-tag-class-someOtherStuff, or id-class-someOtherStuff, id-someOtherStuff {in case that between id and the result object are many other DOM elements}) Thank for your help

Answer 1

Be sure that there is only 1 element with the ID "galleryEl". If there are more than one, it depends on the IE-Version and the compatibility-mode if the first or the last be selected.

example for testing:

<script  type="text/javascript">
jQuery(
        function($)
        {
          alert('Found:'+jQuery("#someID .someclass").eq(1).text());
        }
);
</script>
<div id="someID"><span class="someclass">1</span></div>
<div id="someID"><span class="someclass">2</span><span class="someclass">3</span></div>