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

Question

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

5

使用JavaScript，我该如何动态更改下面列表项中的一个，从这个： ```html ```

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

- TeddyK12

2

小心使用语言，实际上您正在询问第三个项目，即索引为2的项目。 - annakata

7个回答

6

我建议使用jQuery来轻松地进行选择。在你的情况下，你可以使用:eq伪选择器来获取第二个行元素：

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

这个选择器选中了一个类名为tabbernav的元素中的第二个li元素（索引从0开始）。它返回一个jQuery对象，您可以在其上链式调用其他方法。使用.html('您的html代码')来改变内部HTML内容。

- Ryan

2

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

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

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

- Vlad Pana

1

从审核队列中：我可以请求您在您的答案周围添加更多的上下文吗？仅有代码的答案很难理解。如果您能在帖子中添加更多信息，这将有助于提问者和未来的读者。 - RBT

1

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

这将完美地工作。

- kumar

1

我知道这个问题很老了，但是因为它仍然未解决，看看我如何修改第一个答案。我觉得可能还有其他人需要它。

>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）返回一个带有该指定名称的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>

";

- Michael Iyke

0

你如何确定要修改哪个<li>？

如果你是通过索引来进行操作的，你可以尝试以下代码：

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

- Kevin Tighe

2

我不确定这里的childNodes，但我知道浏览器不能保证某些DOM数组的顺序。例如，在IE7渲染模式下使用IE8会破坏一些你可能期望的数组排序。无论如何，DOM数组中节点的位置不能保证与HTML中定义的顺序相同。 - Marc W

@Marc W - 不开玩笑！谢谢你的提示 :)。 - Kevin Tighe

1

据我所知，childNodes 不会跨浏览器安全，因为在非 IE 浏览器中，文本节点也被包括在内。 - annakata

-2

考虑使用像JQuery这样的Javascript库，这将使您的生活变得更加轻松。然后您可以像这样做：

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

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

- Marc W

2

我该如何在没有使用JQuery的情况下完成这个任务？ - TeddyK12

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jesper Haug Karsrud · Accepted Answer

我想你可以在ul里使用getElementsByTagName获取所有列表项并存储为数组。然后，您只需编辑数组中的第三个元素，即索引号为2的元素。

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

当然，这会获取页面上的所有ul元素，如果您的文档中有两个以上的ul，则可能会导致一些奇怪的结果。但是您明白我的意思了吧？如果您不理解我想说什么，请再问一些问题。

好的，上面的代码实际上并不能正常工作。我稍微修改了一下我的代码，但这也包括更改您的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";
    }
}

希望这能对您有所帮助 :)