Arnab Arnab - 5 months ago 20
jQuery Question

adding a class attrib to html element based on certain condition javascript

I have a ul element in my html..

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


which can have
<li>
elements of two kinds..

a) simple..

<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) complex..

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


I wish to add class attribute with value 'active' to a specific
<li>
element via javascript

In my javascript I have a variable my_url.

if my_url matches a href of simple
<li>
say.. "/Campaign/CreateCampaignUrl" then I want the
<li>
to look as below, the li element has 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>


else if complex
<li>
matches..

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


In this case, active value attaches to class in two places..

a) the li element which has the url which matches to my_url.. in above example "/ClassificationUI/ClassifyStandardEvent".

b) the main li element which had class="treeview" has now class="treeview active"

All help is sincerely appreciated

Thanks

Answer

Since you didn't mention you are using jQuery I am going to give you a vanilla javascript answer:

What you want to do is select all links within the menu and run through them one-by-one. For each link you want to traverse upwards through the parentNodes until it matches the menu element and highlight any elements that have tagName of "LI".

var my_url = 'your url here';

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/5/

This will highlight the line items of all matching links, but if you want to limit it to the first match you can throw a break inside the if in the bottom for-loop.