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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744697480a4588581.html

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

5 Answers 5

发表回复

评论列表（0条）

联系我们

400-800-8888

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

5 Answers 5

相关推荐