CODEWITHSUNDEEP
javascriptjquery
Lemon Kazi
Lemon Kazi

Reputation: 3311

Check all li if one has class active then only parent ul addclass

Here I tried with my code but it's adding class="in" not only active parents but also other parents too. I want to add class only for active parent only not others. 

$(function() {
  $(".left_menu .nav-second-level li").each(function() {
    if ($('.left_menu .nav-second-level li').hasClass('active')) {
      $(this).parents('.left_menu .nav-second-level').addClass('in');
    } else {
      $(this).parents('.left_menu .nav-second-level').removeClass('in');
    }
  });
});
.active {
  color: red;
  background-color: red;
}
.in {
  background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="side-menu">
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i> 
      <span class="nav-label">Employee</span>
      <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">create account</a>
      </li>
      <li class="">
        <a href="">role set</a>
      </li>
      <li class="active">
        <a href="">capability set</a>
      </li>
    </ul>
  </li>
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i>
      <span class="nav-label">Department</span>
      <span class="fa arrow"></span>
    </a>

    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">Add department</a>
      </li>
      <li class="">
        <a href="">Vew Deparment</a>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 2

Views: 5729

Answers (5)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You don't need to use each you can do it easily like following.

$('.left_menu .nav-second-level li').parent().removeClass('in')
$('.left_menu .nav-second-level li.active').parent().addClass('in')

Full Snippet

$('.left_menu .nav-second-level li').parent().removeClass('in')
 $('.left_menu .nav-second-level li.active').parent().addClass('in')
.active {
  color: red;
  background-color: red;
}
.in {
  background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="side-menu">
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i> 
      <span class="nav-label">Employee</span>
      <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">create account</a>
      </li>
      <li class="">
        <a href="">role set</a>
      </li>
      <li class="active">
        <a href="">capability set</a>
      </li>
    </ul>
  </li>
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i>
      <span class="nav-label">Department</span>
      <span class="fa arrow"></span>
    </a>

    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">Add department</a>
      </li>
      <li class="">
        <a href="">Vew Deparment</a>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 4

A Macdonald
A Macdonald

Reputation: 824

try this:

$(function() {

    $(".left_menu .nav-second-level li").each(function() {
       if ( $(this).hasClass('active') ) { 
          $(this).parent().addClass('in'); 
       }  else {
          $(this).parent().removeClass('in');
       }
    });
});

Upvotes: 0

ameenulla0007
ameenulla0007

Reputation: 2683

$("#side-menu").find(".active").addClass("in");
$("#side-menu").find(".active").parent().addClass("in");

use the above code for your requirement achievement.

Upvotes: 0

GMchris
GMchris

Reputation: 5648

The problem is inside the .each, you're fetching all those elements again. This means you'll always target all elements. What you want to do is use the CURRENT element to check if it .hasClass, just like you did inside the if and else.

 $(function() {
     $(".left_menu .nav-second-level li").each(function() {
    if ($(this).hasClass('active')) {
      $(this).parents('.left_menu .nav-second-level').addClass('in');
    } else {
      $(this).parents('.left_menu .nav-second-level').removeClass('in');
    }
  });
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Within the each handler you need to use the this reference to the current element being iterated over. Your current code doesn't work as you're selecting all the li elements and checking if any of them has an active class. You can also use toggleClass with the boolean state flag to reduce your code. Try this:

$(".left_menu .nav-second-level li").each(function() {
    $(this).parents('.left_menu .nav-second-level').toggleClass('in', $(this).hasClass('active'));
});


$(function() {
  $(".left_menu .nav-second-level li").each(function() {
    $(this).parents('.left_menu .nav-second-level').toggleClass('in', $(this).hasClass('active'));
  });
});
.active {
  color: red;
  background-color: red;
}
.in {
  background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="side-menu">
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i> 
      <span class="nav-label">Employee</span>
      <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">create account</a>
      </li>
      <li class="">
        <a href="">role set</a>
      </li>
      <li class="active">
        <a href="">capability set</a>
      </li>
    </ul>
  </li>
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i>
      <span class="nav-label">Department</span>
      <span class="fa arrow"></span>
    </a>

    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">Add department</a>
      </li>
      <li class="">
        <a href="">Vew Deparment</a>
      </li>
    </ul>
  </li>
</ul>

Upvotes: 0

Related Questions