Question

我正在为客户更新公司网站，我不允许编辑他们的html / css / php。当我需要进行小的更改时，比如在主导航中添加或删除，我必须使用JS覆盖文件和jQuery。无论喜欢与否，这都是他们的系统。

我需要在无序列表中添加一个简单的项目。由于导航包装器具有ID，因此可以轻松定位UL。我不想使用nth：child，因为他们想要在两个特定的其他项目之间使用这个新项目，这可能会改变。没有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/

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

2 个答案: