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的元素中的 second 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>

＆＃34 ;;

Answer 5

如何识别要修改的<li>？

如果你是通过索引做的，你可以这样做我认为：

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

Answer 6

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

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

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

Answer 7

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

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

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

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

7 个答案: