CODEWITHSUNDEEP
jquery
LXhelili
LXhelili

Reputation: 980

Not able to use $(this) inside if statement

How can I refer $('nav > .smart-nav > li') with $(this) inside if statement, instead of $('.nav-second')?

This is the code-

if ($('nav > .smart-nav > li').is('.active')) {
  $('.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>

Upvotes: 2

Views: 95

Answers (4)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Do like below:-

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

Example:-

$('.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>

Upvotes: 2

Pete
Pete

Reputation: 58432

$('nav > .smart-nav > li').is('.active') is checking if any of those li that has the class active, instead if you want the li with the active class, I would do something like this:

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
}

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

You don't need an if() at all if you are looking for a descendant of the active <li> ...just combine selectors:

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

Upvotes: 1

SpeekaDievs
SpeekaDievs

Reputation: 322

I believe you can't. $(this) is available only in events on elements and callbacks

Upvotes: 1

Related Questions