Question

I need to use a custom.js override file to add a new link to an unordered list on three pages. I must use jquery, per the systems requirements, and finding a way to select and insert is really numbing my brain.

Here is the menu block itself:

<div class="nav-block nav-block-logo">
  <div class="nav-block-body">
    <div class="nav-block-content">
      <div class="logo">
    <a href="/"><img src="logo.png"></a>
      </div>
      <h2>Contact Us</h2>
      <ul>
      <li class="active">
      <a href="/contact-us/">Overview</a>
      </li>
      <li>
      <a href="/contact-us/contact-us">Contact Us</a>
      </li>
      <li class="last-child">
      <a href="/contact-us/facilities-and-directions">Facilities &amp; Directions</a>
      </li>
      </ul>
      <a href="http://www.addthis.com/bookmark.php" class="bookmark-share addthis_button">Bookmark &amp; Share</a>
    </div>
  </div>
</div>

I need to add a new li link at the end. I’ve tried after() and append(), and neither have worked. I was told I may need to target the h2 and check to see if the title is “contact us” or not. Not sure how to do this either.

I am relatively new to jquery, and this was kinda dumped on me at last minute. Any help would be greatly appreciated!

Answer 1

I used class targeting. It’s pretty reliable compared to looking for content, and certainly faster. I also made sure to update your last-child classes.

var $list = $(".nav-block .nav-block-content ul:first");
$list.find(".last-child").removeClass("last-child"); 
var $li = $("<li>", {"class": "last-child"}).html('<a href="#">Our Blog</a>');
$list.append($li);

With regards to the selector, I put in the easiest one but you can be more specific if necessary. For example:

var $list = $(".nav-block .nav-block-content ul:first")