Если у ul нет потомков, как я могу скрыть или добавить класс к промежутку над ним?

Итак, у меня есть аккордеон в стиле jquery, на который ссылается пользовательский интерфейс jquery. Я извлекаю навигационную информацию из базы данных, и структура HTML выглядит следующим образом:

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
    <li class="sub-item">
        <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"
            role="tab" id="ui-accordion-accordion-header-0" aria-controls="lvl2" aria-selected="false"
            tabindex="0">
            <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a href="/Ebusiness/events/upcoming-events">
                Upcoming Events</a><span id="arrow"></span></div>
        <ul id="lvl2" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"
            style="display: none;" aria-labelledby="ui-accordion-accordion-header-0" role="tabpanel"
            aria-expanded="false" aria-hidden="true">
            <li class="lvl2"><a href="/upcoming-events/meeting-center">Meeting Center</a></li>
        </ul>
    </li>
    <li class="sub-item">
        <div class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons"
            role="tab" id="ui-accordion-accordion-header-1" aria-controls="lvl2" aria-selected="false"
            tabindex="-1">
            <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><a href="/Ebusiness/Meetings/MeetingsCalendar">
                Calendar of Events</a><span id="arrow"></span></div>
        <ul id="lvl2" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"
            style="display: none;" aria-labelledby="ui-accordion-accordion-header-1" role="tabpanel"
            aria-expanded="false" aria-hidden="true">
        </ul>
    </li>
</div>

Моя цель здесь состоит в том, чтобы удалить тег или добавить класс, к которому я затем смогу применить dispaly: none, если в списке ul # lvl2 нет дочерних элементов.

Это функция jquery, которую я пытаюсь, но, похоже, не выполняется

if ( $('#lvl2:hasChildren') ) {
$("#arrow").addClass("empty"); }

Я не выкидываю ошибок.

Спасибо

Источник

2 ответа

Решение
if ( $('#lvl2').children().length )
    $("#arrow").addClass("empty");

или с кистями:

if ( $('#lvl2').children().length ) {
    $("#arrow").addClass("empty");
}

Причина, по которой это работает, заключается в том, что если длина 1..Infinity это подтверждает как истинно:

if ( 1 ) {
    alert("truly");
}

Но 0 подтверждает ложность:

if ( 0 ) {
    alert("falsy");
}
else {
    alert("truly");
}

Вы можете подтолкнуть вашу проверку к противоположному с помощью !,

!0 === true;
!1 === false;
!false === true;
!true === false;

И опять:

!!0 === false;
!!1 === true;
!!false === false;
!!true === true;
Источник

Если вы извлекаете навигационную информацию из базы данных и создаете HTML-код для навигации, у меня будет соблазн изменить созданный вами HTML-код и добавить / удалить класс таким образом, а не использовать Javascript для последующего изменения страницы.

Если вышеупомянутое не вариант, я также рекомендовал бы использовать метод.children(). Length(), предложенный @NULL.

Источник
Другие вопросы по тегам