如何使用javascript选择第二个<LI>元素？

Question

使用JavaScript,我如何动态更改下面的列表项之一:

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">Two</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

至

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">-----------NEW LIST ITEM CHANGED---------</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

Answer 1

我猜你可以在ul里面使用getElementsByTagName来获取数组中的所有列表项.然后,您可以编辑数组中的第三个元素,索引号为2.

var lItems = document.getElementsByTagName("ul").getElementsByTagName("li");
lItems[2].innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----</a>";

那将在页面上获取所有ul元素,如果你的文档中有两个以上的uls,可能会导致一些奇怪的结果.但是你明白了,对吗？如果你不明白我想说的话,可以再询问一下.

好的,上面的代码并没有真正正常工作.我已经修改了我的代码,但是这也包含了对HTML的更改,因为我认为你只有一个ul"tabbernav",因此我将其更改class="tabbernav"为id="tabbernav".这是执行您想要的代码.

var ul = document.getElementById("tabbernav");
var liArray = ul.getElementsByTagName("li");

for (var i = 0; i < liArray.length; i++) {
    if(liArray[i].childNodes[0].title == "Two") {
        liArray[i].innerHTML = "Your desired output";
    }
}

希望能帮助你更多:)

Answer 2

我还建议使用jQuery，它使选择变得如此简单。在您的情况下，可以使用：eq psuedo-selector获得第二行元素：

$('.tabbernav li:eq(1)')

这将选择DOM元素，该元素是具有tabbernav类的元素中的第二个 li（索引从0开始）。它返回一个jQuery对象，您可以将其链接到其他方法。更改内部HTML使用.html（“此处为您的html”）完成。

Answer 3

考虑使用 Javascript 库，例如 JQuery。这会让你的生活变得更加轻松。然后你可以做这样的事情：

$('li a[title=Two]').text('Changed Text Goes Here');

您需要检查我的语法（不确定该text()函数），但在 JQuery 的 api 文档中查找很容易。