[jQuery] Re: Simple list don't work in IE

[Klaus Hartl]

mrjoops wrote:
Hi all,
I expect from the following code to display only the submenu of the
active menu. It works like a charm under Firefox and Opera but not
under IE (at least under version 7).
If someone could help, I would appreciate.

Here is the code:
$(document).ready(function()
{
  $("ul").hide();
  $("ul.level1").show();
  $("li.active").next("ul").show();
});

Here is the HTML:
<ul class="level1">
  <li>menu 1</li>
  <ul class="level2">
    <li>submenu 1 - 1</li>
    <li>submenu 1 - 2</li>
  </ul>
  <li class="active">menu2</li>
  <ul class="level2">
    <li>submenu 2 - 1</li>
    <li>submenu 2 - 2</li>
  </ul>
</ul>

Thanks in advance

I guess it's another example why not to script on top of invalid HTML. A 
<ul> element may only contain <li> children. The correct HTML would look 
 like:

<ul class="level1">
  <li>
    menu 1
    <ul class="level2">
      <li>submenu 1 - 1</li>
      <li>submenu 1 - 2</li>
    </ul>
  </li>
  <li class="active">
    menu2
    <ul class="level2">
      <li>submenu 2 - 1</li>
      <li>submenu 2 - 2</li>
    </ul>
  </li>
</ul>

Brower's tag soup parsers will attempt to fix errors that an HTML author 
may have made, but by no means can you expect that they will do it 
consistently cross browser.

My guess is that IE will implicitly add the missing li element when 
encountering the unexpected, incorrectly nested <ul>, thus the selection:

$("li.active").next("ul")

will simply fail. There is no next (sibling) <ul>, but a <li>.

The HTML validator is your friend:
http://validator.w3.org/

You should also have a look at that recent discussion about exactly the 
same topic for even more insight:
http://groups.google.com/group/jquery-en/browse_thread/thread/50fa1b33346c54d4/9d9c13f8328e8bad#9d9c13f8328e8bad

(starting with some later posts)



--Klaus