conditional addClass("active") to Bootstrap nav-bar

conditional addClass("active") to Bootstrap nav-bar

My previous post disappeared 

How can I set the class of a <li> tag if it contains text that matches the id of the body tag?

I used a PHP include to attach a nav-bar to all my web pages. Would like to dynamically add a class "active" to the <li> tag that has the text matching the id of the body tag.


  3. <body id="Journal">
  4. <!-- Docs master nav -->
  5. <header class="navbar navbar-static-top bs-docs-nav navbar-inverse" id="top" role="banner">
  6.     <div class="container">
  7.       <div class="navbar-header">
  8.         <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  9.           <span class="sr-only">Toggle navigation</span>
  10.           <span class="icon-bar"></span>
  11.           <span class="icon-bar"></span>
  12.           <span class="icon-bar"></span>
  13.         </button>
  14.         <a href="#" class="navbar-brand">Notes</a>
  15.       </div>
  16.       <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
  17.         <ul class="nav navbar-nav">
  18.           <li class="" >
  19.             <a href="#">Journal</a>
  20.           </li>
  21.           <li>
  22.             <a href="#">Programming</a>
  23.           </li>
  24.         </ul>
  25.       </nav>
  26.     </div>
  27. </header>

The JQuery I tried


  3. var subject = $("body").attr("id");

  5. var listItems = $(".navbar-nav").children();

  7. listItems.each(
  8. function(i){ 
  9. var li = listItems[i]
  10. if(listItems[i].firstChild.nextSibling.innerHTML == subject){
  11. console.log("Match found"); 
  12. listItems[i].addClass("active"); // => error : addClass is not a function.
  13. return false;
  14. }else{
  15. console.log("Not found"); 
  16. }
  17. });