Question

如何在if语句中引用$('nav > .smart-nav > li') $(this)而不是$('.nav-second')？

这是代码 -

＆＃13;

if ($('nav > .smart-nav > li').is('.active')) {
  $('.nav-second').addClass('in');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="nav smart-nav">
    <li><a href=""><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
    <li class="active">
      <a data-toggle="collapse" aria-expanded="false" class="collapsed">
        <i class="fa fa-home"></i><span>Administrator Portal</span><span class="sub-nav-icon"> <i class="fa fa-angle-down"></i> </span>
      </a>
      <ul id="" class="nav nav-second collapse" aria-expanded="false">
        <li><a href="administrator-portal.html">Dashboard</a></li>
        <li><a href="activity.html">Customer Report</a></li>
      </ul>
    </li>
    <li>
      <a data-toggle="collapse" aria-expanded="false" class="collapsed">
        <i class="fa fa-support"></i><span>Support</span><span class="sub-nav-icon"> <i class="fa fa-angle-down"></i> </span>
      </a>
      <ul id="" class="nav nav-second collapse" aria-expanded="false">
        <li><a href="tableStyles.html">Logs</a></li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

$('nav > .smart-nav > li').is('.active')正在检查是否有任何激活类的li，相反，如果你想要li与活动类，我会做这样的事情：

var li = $('nav > .smart-nav > li.active'); // get the active li

if(li.length){  // check if there are any
  li.find('.nav-second').addClass('in'); // here the li var acts like your this as it is the ones with the active class
}

Answer 2

如下所示： -

$('.smart-nav > li.active').children('ul.nav-second').addClass('in');

实施例： -

$('.smart-nav > li.active').children('ul.nav-second').addClass('in');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul class="nav smart-nav">
        <li><a href=""><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
        <li class="active">
            <a data-toggle="collapse" aria-expanded="false" class="collapsed">
                <i class="fa fa-home"></i><span>Administrator Portal</span><span class="sub-nav-icon"> <i class="fa fa-angle-down"></i> </span>
            </a>
            <ul id="" class="nav nav-second collapse" aria-expanded="false">
                <li><a href="administrator-portal.html">Dashboard</a></li>
                <li><a href="activity.html">Customer Report</a></li>
            </ul>
        </li>
        <li>
            <a data-toggle="collapse" aria-expanded="false" class="collapsed">
                <i class="fa fa-support"></i><span>Support</span><span class="sub-nav-icon"> <i class="fa fa-angle-down"></i> </span>
            </a>
            <ul id="" class="nav nav-second collapse" aria-expanded="false">
                <li><a href="tableStyles.html">Logs</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 3

我相信你不能。 $（this）仅在元素和回调事件中可用

Answer 4

如果您正在寻找活跃if()的后代，则根本不需要<li> ...只需合并选择器：

$('nav > .smart-nav > li.active .nav-second').addClass('in');

无法在if语句中使用$（this）

4 个答案: