2

我需要使用 custom.js 覆盖文件将新链接添加到三页上的无序列表。根据系统要求，我必须使用 jquery，并且找到一种选择和插入的方法真的让我的大脑麻木了。

这是菜单块本身：

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

我需要在最后添加一个新的 li 链接。我试过 after() 和 append()，但都没有奏效。有人告诉我，我可能需要定位 h2 并检查标题是否为“联系我们”。也不知道该怎么做。

我对 jquery 比较陌生，这在最后一分钟有点丢给了我。任何帮助将不胜感激！

4

3 回答 3

2

您可以使用contains选择器：

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/

于 2012-10-08T17:14:30.333 回答
2

我使用了类定位。与查找内容相比，它非常可靠，而且速度肯定更快。我还确保更新您的最后一个孩子课程。

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

关于选择器，我输入了最简单的选择器，但如有必要，您可以更具体。例如：

var $list = $(".nav-block .nav-block-content ul:first")
于 2012-10-08T17:19:40.163 回答
1

假设你的新li元素是一个 DOM 对象：

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

将其添加为ul.

这是一个小提琴（它还演示了如何将last-child类移动到正确的元素）：http: //jsfiddle.net/EwMSB/

于 2012-10-08T17:21:05.880 回答