jQuery Selector.size () продолжает возвращать ноль

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 может показаться непредсказуемой, когда вы начинаете, и не знаете ограничений javascript (например, пытаетесь определить размер элемента, пока он не вставлен в DOM), но в конечном итоге вы обнаружите, что jQuery на самом делерешает все ваши кросс-браузерные проблемы с JavaScript (и многое другое).

Кстати, довольно вводящее в заблуждение название:)