javascript - 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=".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>

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./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>

Share Improve this question edited Jan 26, 2016 at 11:08 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked Jan 26, 2016 at 11:07 Lemon Kazi 3,3112 gold badges40 silver badges71 bronze badges

for these things, you need to fiddle your problem, for beter visualization. – ameenulla0007 Commented Jan 26, 2016 at 11:17
Why are you asking for a fiddle when there's a fully working snippet in the question showing the problem? – Rory McCrossan Commented Jan 26, 2016 at 11:21

Add a ment |

5 Answers 5

Sorted by: Reset to default 4

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./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>

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./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>

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

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

use the above code for your requirement achievement.

try this:

$(function() {

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Check all li if one has class active then only parent ul addclass - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)