このJQueryコードはIE7では動作しませんが、他のブラウザでは機能します

Question

私の問題は、現代のブラウザでうまく動作するjqueryを持っていますが、IE7では動作しません。

< A>タグのいずれかをクリックすると、 "innerdetails"と呼ばれるdivが開きます。

<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のコードです：

は、ここに私のHTMLです。

$(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は.childrenのための長さとして "0" を返すことである（ "インナー・コースの詳細"）

Chromeは "1"

Answer 1

返しますこれは有効なHTML（ulタグにはdivタグを含めることはできません）という事実のために発生する可能性があります。したがって、IE7はDOMツリーの一部ではないと考えられます。 liをINGの.toggle()そして、liタグの内側にdivを入れて（またはだけではなく、liタグを使用して）しようとし、固定するために

。

Answer 2

私は理由を正確に知りませんが、あなたはfindにchildrenを変更した場合、それは

$("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/

の作品