Этот код JQuery для переключения div не работает в IE7, но работает в других браузерах

Question

Вот моя проблема, у меня есть кусок jquery, который отлично работает в современных браузерах, но не будет работать в IE7.

Идея заключается в том, что при нажатии на один из тегов открывается div, называемый innerdetails.

Вот мой HTML:

<ul class="table">
<li><a href="#">CLICK HERE</a></li>
<li><a href="#">Techniques</a> </li>
<li >3</li>
<div class="innerdetails">
   Technical services, including MARC.
</div>
</ul>

Вот оскорбительный код Jquery.

$(document).ready(function() {
    $("ul.table li a").click(function() {
    $(this).parent("li").parent("ul").children(".innerdetails").toggle();
    alert ( $(this).parent("li").parent("ul").children(".innerdetails").length )
    return false;
    });
});

Интересно, что в предупреждении IE7 возвращает "0" как длину для.children(". Inner-course-details")

Chrome возвращает "1"

Answer 1

Вероятно, проблема связана с тем, что это недействительный HTML (ul тег не может содержать div тег), поэтому IE7, вероятно, не считает его частью дерева DOM.

Чтобы исправить, попробуйте положить div внутри li тег (или просто с помощью li вместо тега), затем .toggle()в li,

Answer 2

Я не знаю точно, почему, но если вы измените children в find оно работает

$("ul.table li a").click(function() {
    $(this).parent("li").parent("ul").find(".innerdetails").toggle();
    alert ( $(this).parent("li").parent("ul").find(".innerdetails").length )
    return false;
});

И jsfiddle http://jsfiddle.net/6heVt/2/