Adding a new item to an unordered list using jQuery with no IDs and too many classes

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!

Mike Robinson · Accepted Answer · 2012-10-08 20:20:45Z

2

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

edited Oct 8, 2012 at 20:20

answered Oct 8, 2012 at 17:19

Mike Robinson

25.2k8 gold badges64 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1729506 Over a year ago

Looks solid. I tried it. Didn't work. :( I have no idea why I can't get something so simple to work.

Mike Robinson Over a year ago

Typo on line 3, I fixed it, give it another shot. I hate handling strings in JS.

user1729506 Over a year ago

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

Worked! Thanks!

Ram · Accepted Answer · 2012-10-08 17:19:38Z

2

You can use contains selector:

var $li = $('<li>', {
  'id': 'id',
  'class': 'class'
}).html('<a href="herf">text</a>');

$('h2:contains("Contact Us")').siblings('ul').append($li);    
// $('.nav-block-logo ul)').append($li);

http://jsfiddle.net/fj2K5/

edited Oct 8, 2012 at 17:19

answered Oct 8, 2012 at 17:14

Ram

145k16 gold badges174 silver badges201 bronze badges

3 Comments

Mike Robinson Over a year ago

I don't think you should use his proposed solution. Why not just target the list based on class? Content is subject to change.

Mike Robinson Over a year ago

I have, there's nothing there saying you can't use selector targeting

Tats_innit Over a year ago

hmm, interesting looks fine +1 bruver, unless I missed anything. :)

pete · Accepted Answer · 2012-10-08 17:21:05Z

1

Assuming your new li element is a DOM object:

$('div.nav-block-content ul').append(newLI);

will add it as the last child of the ul.

Here's a fiddle (which also demos how to move the last-child class to the correct element): http://jsfiddle.net/EwMSB/

answered Oct 8, 2012 at 17:21

pete

25.2k4 gold badges40 silver badges52 bronze badges

1 Comment

pete Over a year ago

It works in the fiddle I set up. Are you wrapping it in a $(document).ready() function?

Collectives™ on Stack Overflow

Adding a new item to an unordered list using jQuery with no IDs and too many classes

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related