CODEWITHSUNDEEP
jquery
None
None

Reputation: 9247

How to add icon with jquery?

I have this navigation and this script where i add active class on click. I want to add also icon so when user click on icon to get class active and also to have icon inside <a href=""></a>. This the icon that i want to add:

<i class="fa fa-angle-right"></i>

<nav class="right-content-links">
  <ul>
   <li><a href="/permanent-galleries" class="active">PERMANENT GALERIES</a></li>
   <li><a href="/exhibitions">EXHIBITIONS</a></li>
   <li><a href="/items">ITEMS</a></li>
   <li><a href="/events">EVENTS</a></li>
   <li><a href="/coming-soon">COMING SOON</a></li>
   <li><a href="/news">NEWS</a></li>
  </ul>
</nav>

$(function() {
  var href = window.location.href;
  $('nav a').each(function(e,i) {
    if (href.indexOf($(this).attr('href')) >= 0) {
      $(this).addClass('active');
    }
  });
});

Upvotes: 1

Views: 1588

Answers (2)

Parth Trivedi
Parth Trivedi

Reputation: 3832

You should do

$(function() {
  var href = window.location.href;
  $('nav a').each(function(e,i) {
    if (href.indexOf($(this).attr('href')) >= 0) {
      //append icon here   
      $(this).addClass('active').append('<i class="fa fa-angle-right"></i>');
    }
  });
});

Upvotes: 1

Jai
Jai

Reputation: 74738

You can do this: 

$(this).addClass('active').append('<i class="fa fa-angle-right"></i>');

Upvotes: 2

Related Questions