How to manage nested class using jQuery?

user_7333403 0
Viewed 76

I have multiple nested ul and li now i want o access just main child not all the children's how can i access?

Issue: I'm trying to toggle clicked li to plus with minus but right now all the children toggle but i want just clicked li should be toggle.

My Code:-

$('.has-sub').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
  $(this).find('a svg').toggleClass('fa-plus fa-minus')
});
.product-category-nav h4 {
  text-transform: uppercase;
  font-size: 18px;
}

.product-category-nav ul {
  margin: 0px;
  padding: 0px;
}

.product-category-nav ul li {
  list-style: none;
}

.product-category-nav ul li a {
  display: block;
  color: #333;
  font-weight: normal;
  font-size: 13px;
  padding: 0px 0px;
  line-height: 45px;
  border-bottom: 1px solid #ccc;
}

.product-category-nav ul li a:hover {
  color: #0d6efd;
}

.product-category-nav ul li a:hover {
  text-decoration: none;
}

.product-category-nav ul li a svg {
  float: right;
  margin-top: 18px;
  font-size: 11px;
}

.product-category-nav ul.category-sub {
  display: none;
}

.product-category-nav .has-sub.active ul.category-sub {
  display: block;
  margin-top: 5px;
}

.product-category-nav ul.category-sub li a {
  background-color: #f5f5f5;
  border: 0px;
  margin-bottom: 5px;
  padding: 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>

<div class="product-category-nav">
  <h4>PRODUCT CATEGORY </h4>
  <ul>
    <li class="has-sub"><a href="#">Healthcare & Medical <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu 1 <i class="fa fa-plus"></i></a></li>
        <li><a href="#">first menu 2 <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Food Service Disposables <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Hygiene & Cleaning <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Covid-19 Protection <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
  </ul>
</div>

Thank You!

jquery javascript
3 Answers

The issue is because find() will traverse all child nodes in the DOM, affecting all where necessary.

To correct this behaviour in this case you can use children() as this only looks at direct child elements, not grandchildren, great-grandchildren etc.

$('.has-sub').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
  $(this).children('a').find('svg').toggleClass('fa-plus fa-minus');
});
.product-category-nav h4 {
  text-transform: uppercase;
  font-size: 18px;
}

.product-category-nav ul {
  margin: 0px;
  padding: 0px;
}

.product-category-nav ul li {
  list-style: none;
}

.product-category-nav ul li a {
  display: block;
  color: #333;
  font-weight: normal;
  font-size: 13px;
  padding: 0px 0px;
  line-height: 45px;
  border-bottom: 1px solid #ccc;
}

.product-category-nav ul li a:hover {
  color: #0d6efd;
}

.product-category-nav ul li a:hover {
  text-decoration: none;
}

.product-category-nav ul li a svg {
  float: right;
  margin-top: 18px;
  font-size: 11px;
}

.product-category-nav ul.category-sub {
  display: none;
}

.product-category-nav .has-sub.active ul.category-sub {
  display: block;
  margin-top: 5px;
}

.product-category-nav ul.category-sub li a {
  background-color: #f5f5f5;
  border: 0px;
  margin-bottom: 5px;
  padding: 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>

<div class="product-category-nav">
  <h4>PRODUCT CATEGORY </h4>
  <ul>
    <li class="has-sub"><a href="#">Healthcare & Medical <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu 1 <i class="fa fa-plus"></i></a></li>
        <li><a href="#">first menu 2 <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Food Service Disposables <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Hygiene & Cleaning <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Covid-19 Protection <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
  </ul>
</div>

user_5194130

Example below:

use $(">a svg",this)

$("li").click(function (e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass("active");
  $(">a svg",this).toggleClass("fa-plus fa-minus");
});
.product-category-nav h4 {
            text-transform: uppercase;
            font-size: 18px;
        }
        
        .product-category-nav ul {
            margin: 0px;
            padding: 0px;
        }
        
        .product-category-nav ul li {
            list-style: none;
        }
        
        .product-category-nav ul li a {
            display: block;
            color: #333;
            font-weight: normal;
            font-size: 13px;
            padding: 0px 0px;
            line-height: 45px;
            border-bottom: 1px solid #ccc;
        }
        
        .product-category-nav ul li a:hover {
            color: #0d6efd;
        }
        
        .product-category-nav ul li a:hover {
            text-decoration: none;
        }
        
        .product-category-nav ul li a svg {
            float: right;
            margin-top: 18px;
            font-size: 11px;
        }
        
        .product-category-nav ul.category-sub {
            display: none;
        }
        
        .product-category-nav .has-sub.active ul.category-sub {
            display: block;
            margin-top: 5px;
        }
        
        .product-category-nav ul.category-sub li a {
            background-color: #f5f5f5;
            border: 0px;
            margin-bottom: 5px;
            padding: 0px 15px;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>

<div class="product-category-nav">
  <h4>PRODUCT CATEGORY</h4>
  <ul>
    <li class="has-sub">
      <a href="#">Healthcare & Medical <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li>
          <a href="#">first menu 1 <i class="fa fa-plus"></i></a>
        </li>
        <li>
          <a href="#">first menu 2 <i class="fa fa-plus"></i></a>
        </li>
      </ul>
    </li>
    <li class="has-sub">
      <a href="#">Food Service Disposables <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li>
          <a href="#">first menu <i class="fa fa-plus"></i></a>
        </li>
      </ul>
    </li>
    <li class="has-sub">
      <a href="#">Hygiene & Cleaning <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li>
          <a href="#">first menu <i class="fa fa-plus"></i></a>
        </li>
      </ul>
    </li>
    <li class="has-sub">
      <a href="#">Covid-19 Protection <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li>
          <a href="#">first menu <i class="fa fa-plus"></i></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

user_140323550

Use code eq(0) to trigger the first element of find().Like:

$(this).find('a svg:eq(0)').toggleClass('fa-plus fa-minus');


$('.has-sub').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
  $(this).find('a svg:eq(0)').toggleClass('fa-plus fa-minus');
});
.product-category-nav h4 {
  text-transform: uppercase;
  font-size: 18px;
}

.product-category-nav ul {
  margin: 0px;
  padding: 0px;
}

.product-category-nav ul li {
  list-style: none;
}

.product-category-nav ul li a {
  display: block;
  color: #333;
  font-weight: normal;
  font-size: 13px;
  padding: 0px 0px;
  line-height: 45px;
  border-bottom: 1px solid #ccc;
}

.product-category-nav ul li a:hover {
  color: #0d6efd;
}

.product-category-nav ul li a:hover {
  text-decoration: none;
}

.product-category-nav ul li a svg {
  float: right;
  margin-top: 18px;
  font-size: 11px;
}

.product-category-nav ul.category-sub {
  display: none;
}

.product-category-nav .has-sub.active ul.category-sub {
  display: block;
  margin-top: 5px;
}

.product-category-nav ul.category-sub li a {
  background-color: #f5f5f5;
  border: 0px;
  margin-bottom: 5px;
  padding: 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"></script>

<div class="product-category-nav">
  <h4>PRODUCT CATEGORY </h4>
  <ul>
    <li class="has-sub"><a href="#">Healthcare & Medical <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu 1 <i class="fa fa-plus"></i></a></li>
        <li><a href="#">first menu 2 <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Food Service Disposables <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Hygiene & Cleaning <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
    <li class="has-sub"><a href="#">Covid-19 Protection <i class="fa fa-plus"></i></a>
      <ul class="category-sub">
        <li><a href="#">first menu <i class="fa fa-plus"></i></a></li>
      </ul>
    </li>
  </ul>
</div>

user_138044730
Related