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

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

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

Answer 3

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

这将是完美的

Answer 4

我知道这个问题很老但是因为它仍然是开放的，看看我是如何修改第一个答案的。 我觉得别人可能需要它。

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

因此，基本上通过指定lItems的位置来解决它，特别是抓取并且在这种情况下[0]。 如果缺少该位置，代码将无法正常工作，因为getElementsByTagName（NAME）返回带有指定NAME的html元素的集合。 因此，如果您没有指定其中的哪一个，则代码将失败。

如果您喜欢代码重用，请参阅您可以使用的功能。 你只需要指定父元素及其位置和childNode位置，你就会得到同样的东西。

>var nthChild = function(parent, pos, childPos){
>>parent = document.getElementsByTagName(parent)[pos];
>>>return parent.children[childPos];
>>>>};
//used thus:
>nthChild("ul", 0, 2).innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----> </a>

---

“;

Answer 5

这是您在纯JavaScript中选择Ul列表的第三个Li元素的方法。

document.querySelectorAll("li")[2].innerHTML = "vasile";

将“Vasile”替换为您想要的文字。

Answer 6

您如何确定哪个<li>是您要修改的？

如果你是通过索引做的，你可以做这样的事情我想：

var list = document.getElementById("listid");
list.childNodes[2].innerHtml = "<a title='Two'>-----------NEW LIST ITEM CHANGED---------</a>";

Answer 7

考虑使用JQuery等Javascript库。 这将使你的生活更轻松。 然后你可以做这样的事情：

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

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