0

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

我需要将一个简单的项目添加到无序列表中。定位 UL 很容易，因为 nav 包装器有一个 ID。我不想使用 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，我怎样才能最安全地做到这一点？

4

2 回答 2

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>');
});
于 2012-10-23T15:38:11.900 回答
0

试试这个...

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

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

于 2012-10-23T15:29:42.567 回答