根据兄弟姐妹的内部内容添加带有jQuery的菜单项

Question

我正在为客户更新公司网站，因此我不允许编辑他们的HTML/CSS/PHP。当我需要进行少量更改（例如从主导航中添加或删除）时，我必须使用JS Override文件和jQuery。喜欢与否，这是他们的系统。

我需要在无序列表中添加一个简单的项目。针对UL很容易，因为NAV包装器具有ID。我不想使用nth：孩子，因为他们希望在两个其他特定项目之间使用这个新项目，这可能会改变。LI标签都没有类或ID。每个LI内部是一个链接/锚。我需要能够根据内部锚的文本选择列表项目。

<div id="nav">
<ul>
  <li><a href="">Something 1</a></li>
  <li><a href="">Something 2</a></li>
  // Need to insert here, but only because it must go after 
     Something 2, which itself may change positions in the future.
  <li><a href="">Something 3</a></li>
  <li><a href="">Something 4</a></li>
</ul>
</div>

使用jQuery，我该如何安全地这样做？

Answer 1

这应该做你想要的。

$('#nav li').filter(function(){
     return $(this).text() == 'Something 2';
}).after('<li><a href="">Something new</a></li>');

---

比较更安全的方法是修剪并将两个字符串转换为小写。
此外，您应该在Domready事件之后调用您的代码

$(function(){
    var existingElement = 'Something 2'.toLowerCase();
    $('#nav li').filter(function(){
         var cleanText = $.trim($(this).text()).toLowerCase();
         return cleanText  == existingElement;
    }).after('<li><a href="">Something new</a></li>');
});

Answer 2

尝试这个...

$("ul#nav li").filter(function() {
    return $(this).find("a").text() == "Something 2";
}).after("<li>your element goes here</li>");​

这是一个工作小提琴... http://jsfiddle.net/sbm7d/