Adding "active" class to each li using JQuery

Question

I'm trying to add class active to each li tag in my website but I think something is wrong in my code and I don't know what is it, anyone can help. I will be appreciated.

 $(function () {
     var pgurl = window.location.search;
     $("li a").each(function () {
         if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
             $(this).addClass("active");
     });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu" class="bg-blue dker">
    <li class="nav-header">القائمة</li>
    <li class="nav-divider"></li>
    <li class="">
        <a href="#">
            <i class="fa fa-tasks"></i>
            <span class="link-title">الأقسام والأصناف</span>
            <span class="fa arrow"></span>
        </a>
        <ul class="collapse">
            <li class="">
                <a href="?page=Hot-drinks-section">
                    المشروبات الساخنة</a>
            </li>
            <li>
                <a href="?page=Soft-drinks-section">
                    المشروبات الباردة</a>
            </li>
            <li>
                <a href="?page=Food-section">
                    المأكولات</a>
            </li>
        </ul>
    </li>
    <li class="">
        <a href="?page=Make-an-order">
            <i class="fa fa-plus"></i> <span class="link-title">إضافة طلب جديد</span>
        </a>
    </li>
</ul>

I need to add active class for the page I opened for example. I'm in Home page I want the li of home page has the active class and so on... — Hazem Behairy
– Hazem Behairy, Commented Oct 29, 2021 at 5:07
Ok, but the situation cannot be replicated in this snippet. So I think the problem is, currently you are adding the active class to the a under li, not to the li. Is that the expected behaviour or you want to add to the li itself? — Abin Thaha Azees
– Abin Thaha Azees, Commented Oct 29, 2021 at 5:10
I just realized that I have to use $(this).closest('li') this is work thanks bro. — Hazem Behairy
– Hazem Behairy, Commented Oct 29, 2021 at 5:16

Pramod kushwaha · Accepted Answer · 2021-10-29 06:43:49Z

1

You need to add class on a parent element example: $(this).parent().addClass("active");

Try below code

$(function () {
 var pgurl = window.location.search;
 $("li a").each(function () {
     if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
      $(this).parent().addClass("active");
 });
});

answered Oct 29, 2021 at 6:43

Pramod kushwaha

4496 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abin Thaha Azees · Accepted Answer · 2021-10-29 05:16:49Z

Try the below snippet.

The change I made is $(this).parent().addClass("active");, so that the active class will be added to li, not a.

$(function () {
     var pgurl = window.location.search;
     $("li a").each(function () {
         if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
             $(this).parent().addClass("active");
     });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu" class="bg-blue dker">
    <li class="nav-header">القائمة</li>
    <li class="nav-divider"></li>
    <li class="">
        <a href="#">
            <i class="fa fa-tasks"></i>
            <span class="link-title">الأقسام والأصناف</span>
            <span class="fa arrow"></span>
        </a>
        <ul class="collapse">
            <li class="">
                <a href="?page=Hot-drinks-section">
                    المشروبات الساخنة</a>
            </li>
            <li>
                <a href="?page=Soft-drinks-section">
                    المشروبات الباردة</a>
            </li>
            <li>
                <a href="?page=Food-section">
                    المأكولات</a>
            </li>
        </ul>
    </li>
    <li class="">
        <a href="?page=Make-an-order">
            <i class="fa fa-plus"></i> <span class="link-title">إضافة طلب جديد</span>
        </a>
    </li>
</ul>

Collectives™ on Stack Overflow

Adding "active" class to each li using JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related