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

Posted 2023-03-06

【中文标题】使用 JQuery 向每个 li 添加“活动”类

【英文标题】：Adding "active" class to each li using JQuery

【发布时间】：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') 这是工作谢谢兄弟。

【参考方案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");
 );
);