jQuery Selector.size()가 0을 계속 반환합니다.

Question

ASP.NET MVC 웹 응용 프로그램을 구축 중이며 일부 클라이언트 측 프로그래밍을 위해 jQuery를 사용하고 있습니다. 데이터베이스에서 데이터를 가져오고 클라이언트 측에서 동적으로 생성되는 범주 디스플레이가 있습니다.

사용자 지정 아코디언 메뉴를 만들기 위해 하위 범주를 숨기려고하면 아무 일도 발생하지 않습니다. 디버깅 할 때 범주 컬렉션의 크기를 알려주려고하는데 모든 것이 화면에 표시되는 방식으로 계속 제로가됩니다. 여기에 코드입니다 :

//markup (my view-engine is Razor) 
<div class="sharwe-categories"> 
    <ul class="menu menu-vertical menu-accordion"> 
     @foreach(var topLevel in Model.Categories) 
     { 
      <li class="topLevel"> 
       <h3> 
        <a href="#" class="main">@topLevel.Name</a> 
        <a href="#" class="drop-down"></a> 
       </h3> 
       <ul class="childCategories"> 
        @foreach (var childCategory in topLevel.Children) 
        { 
         <li><a href="#">@childCategory.Name</a></li> 
        } 
       </ul> 
      </li> 
     } 
    </ul> 
</div> 

//Javascript code: 
$(document).ready(function() { 
    var $categories = $('#sharwe-categories .menu li.topLevel'); 
    var $categories_children = $('ul.childCategories', $categories).hide(); 
    var $categories_dropdown = $('a.drop-down', $categories); 
}); 

는 솔직히 말해서, 나는 jQuery로 좋은 적이 없었다 그리고 나는 그것이 "예측할 수없는"입니다 느끼기 때문에 항상 날 화나게 - 물론 내가 대신 백엔드 물건 작업을 선호 어쩌면 때문이다.

도움을 주시면 감사하겠습니다.

Answer 1

<div class="sharwe-categories"> 

$('#sharwe-categories .menu li.topLevel'); 

당신은 DIV에 클래스를 얻었으나, # (ID)에 의해 그것을 찾기 위해 노력했습니다. $('.sharwe-categories .menu li.topLevel');

시작시 jquery로 작업하는 것이 예상치 않게 느껴질 수 있으며 DOM에 삽입되지 않은 상태에서 요소 크기를 감지하는 등의 JavaScript 제한 사항을 알지 못하지만 궁극적으로 jQuery가 모든 십자가를 실제로 해결한다는 것을 알게 될 것입니다 - 브라우저 자바 스크립트 문제 (및 훨씬 더).

그런데 오해의 소지가있는 제목 :