javascript - 根据特定条件javascript向html元素添加类属性

Question

我的 html 中有一个 ul 元素..

<ul class="sidebar-menu"> /<ul>

可以有<li>两种元素..

a) 简单..

<li>
                <a href="/Campaign/CreateCampaignUrl">
                    <i class="fa fa-th"></i> <span>Campaign Url</span>
                    <small class="label pull-right bg-green">new</small>
                </a>
            </li>

b) 复杂..

<li class="treeview">
                <a href="#">
                    <i class="fa fa-files-o"></i>
                    <span>Classify Events</span>
                    <span class="label label-primary pull-right">4</span>
                </a>
                <ul class="treeview-menu">
                    <li><a href="/ClassificationUI/ClassifyStandardEvent"><i class="fa fa-circle-o"></i> Standard Events</a></li>
                    <li><a href="/Campaign/ClassifyCampaignProperties"><i class="fa fa-circle-o"></i> Campaign Properties</a></li>
                </ul>
            </li>

我希望将值为“active”的类属性添加到特定的 <li>通过 javascript 元素

在我的 javascript 中我有一个变量 my_url。

如果 my_url 匹配简单的 href <li>说..“/Campaign/CreateCampaignUrl”然后我想要<li>如下所示，li 元素具有 class="active"..

<li class="active">
                    <a href="/Campaign/CreateCampaignUrl">
                        <i class="fa fa-th"></i> <span>Campaign Url</span>
                        <small class="label pull-right bg-green">new</small>
                    </a>
                </li>

否则如果复杂 <li>匹配..

<li class="treeview active">
                    <a href="#">
                        <i class="fa fa-files-o"></i>
                        <span>Classify Events</span>
                        <span class="label label-primary pull-right">4</span>
                    </a>
                    <ul class="treeview-menu">
                        <li class="active"><a href="/ClassificationUI/ClassifyStandardEvent"><i class="fa fa-circle-o"></i> Standard Events</a></li>
                        <li><a href="/Campaign/ClassifyCampaignProperties"><i class="fa fa-circle-o"></i> Campaign Properties</a></li>
                    </ul>
                </li>

在这种情况下，主动值在两个地方附加到类..

a) li 元素具有与 my_url 匹配的 url.. 在上面的示例“/ClassificationUI/ClassifyStandardEvent”中。

b) 具有 class="treeview"的主要 li 元素现在具有 class="treeview active"

真诚感谢所有帮助

谢谢

Answer 1

因为你最初没有提到你正在使用 jQuery，所以我会给你一个普通的 javascript 答案:

您要做的是选择菜单中的所有链接并逐一运行它们。对于您想要向上遍历父节点的每个链接，直到它与菜单元素匹配，并将事件类添加到具有 "LI" 的 tagName 的任何元素。

var my_url = '/ClassificationUI/ClassifyStandardEvent';

var menu = document.getElementsByClassName('sidebar-menu')[0];
var links = menu.getElementsByTagName('a');

function highlight(linkEl) {
  var el = linkEl;

  do {
    el = el.parentNode;
    if (el.tagName === 'LI') el.className += ' active';
  } while (el !== menu);
}

var i, linkEl;

for (i = 0; i < links.length; i += 1) {
  linkEl = links[i];

  if (linkEl.getAttribute('href') === my_url) {
    highlight(linkEl);
    // break here to stop at first match
  }
}

fiddle :https://jsfiddle.net/96y4nzvm/4/

这将突出显示所有匹配链接的行项目，但如果您想将其限制为第一个匹配项，您可以在底部 for 循环的 if 内插入一个中断。

编辑: 由于您已将 jQuery 添加到标签列表中，因此这里也是我的 jQuery 解决方案(相同概念):

var my_url = '/ClassificationUI/ClassifyStandardEvent';

var $menus = $('.sidebar-menu');

$menus.each(function (i) {
  var $menu = $menus.eq(i);
  var $links = $menu.find('a[href="' + my_url +'"]');

  $links.each(function (i) {
    var $link = $links.eq(i);
    $link.parentsUntil($menu ,'li').addClass('active');
  });
});

jQuery fiddle :https://jsfiddle.net/96y4nzvm/7/

jQuery 解决方案的额外好处是能够跨多个菜单工作(例如，一个显示桌面宽度，另一个显示移动宽度)。