Not able to use $(this) inside if statement

Question

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>

Show HTML structure, How `.nav-second` is related to `nav > .smart-nav > li`? — Satpal, Jun 09 '17 at 11:32
Possible duplicate of [What does "this" mean?](https://stackoverflow.com/questions/4195970/what-does-this-mean) — Daniel Beck, Jun 09 '17 at 11:35
`$(this)` refers to context which context are you referring to here? — guradio, Jun 09 '17 at 11:36
$('nav > .smart-nav > li').is('.active') returns a Boolean value. — Lasithds, Jun 09 '17 at 11:38
yes I know, I want to refer on the context of `$('nav > .smart-nav > li')` — LXhelili, Jun 09 '17 at 11:38

score 2 · Answer 1 · answered Jun 09 '17 at 11:40

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

Serving Quarantine period · Accepted Answer · 2017-06-09T11:50:07.740

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>

This would be the best way to add a class - but not sure if there is any other code meant to go inside the `if` (which was why I left it in my answer). Plus one anyway :) — Pete, Jun 09 '17 at 11:52
Thank you, it works now, I have two options to use now. I marked another answer as correct before. I just can give a thumbs up for this one! — LXhelili, Jun 09 '17 at 11:56
@LXhelili mark this one as the answer - it would be the better way to do it if you don't need the `if` to do other stuff — Pete, Jun 09 '17 at 11:58

score 1 · Answer 3 · answered Jun 09 '17 at 11:33

1

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

answered Jun 09 '17 at 11:33

SpeekaDievs

193
1
11

score 1 · Answer 4 · answered Jun 09 '17 at 11:37

1

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');

answered Jun 09 '17 at 11:37

charlietfl

164,229
13
110
143

Not able to use $(this) inside if statement

4 Answers4