使用 JQuery 向每个 li 添加“活动”类答案

【问题标题】：Adding "active" class to each li using JQuery使用 JQuery 向每个 li 添加“活动”类
【发布时间】：2021-12-14 05:34:59
【问题描述】：

我正在尝试为我网站中的每个 li 标签添加活动类，但我认为我的代码有问题，我不知道它是什么，任何人都可以提供帮助。我将不胜感激。

 $(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>

【问题讨论】：

您需要为每个li或特定的li添加活动类吗？
例如，我需要为打开的页面添加活动类。我在主页我希望主页的 li 有活动类等等......
好的，但是这个sn-p中不能复制这种情况。所以我认为问题是，目前您正在将活动类添加到li 下的a，而不是li。这是预期的行为还是您想添加到 li 本身？
是的，我想添加到 li 本身
我刚刚意识到我必须使用$(this).closest('li') 这是工作谢谢兄弟。

标签： javascript html jquery css ajax

【解决方案1】：

试试下面的 sn-p。

我所做的更改是$(this).parent().addClass("active");，因此活动类将添加到li，而不是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>

【讨论】：

【解决方案2】：

您需要在父元素上添加类示例：$(this).parent().addClass("active");

试试下面的代码

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

【讨论】：