Question

所以我有一个jquery风格的手风琴，页面上引用了jquery ui。我从数据库中提取导航信息，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>

我的目标是删除标签，或添加一个我可以显示的类：如果ul＃lvl2列表中没有子节点，则为none。

这是我正在尝试的jquery函数，但似乎没有执行

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

我没有犯任何错误。

由于

Answer 1

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

或与braches：

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

这样做的原因是，如果长度为1..Infinity，则它会真实地验证：

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

但是0验证了falsy：

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

您可以使用!。

将验证推向相反的位置

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

再次：

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

Answer 2

如果您从数据库中提取导航信息并为导航构建HTML，我很想修改您构建的HTML并以这种方式添加/删除类，而不是使用Javascript来修改页面。

如果以上不是一个选项，那么我也建议使用@NULL建议的.children（）。length（）方法。

如果ul没有子节点，我如何隐藏或添加类到它上面的跨度？

2 个答案: