在带有DOM的列表中选择项的最后一个元素
在带有DOM的列表中选择项的最后一个元素
提问于 2020-01-07 06:07:02
不使用jQuery (因为我还没有开始这个部分)，仅仅使用一些好的旧JavaScript/DOM，我如何在列表中选择项目的最后一个元素。
例如，我有以下HTML：
<section id="container">
<ul>
<li class="first">one</li>
<li class="second">two</li>
<li class="third">three</li>
</ul>
<ol>
<li class="first">one</li>
<li class="second">two</li>
<li class="third">three</li>
</ol>
</section>
我希望选择这个项目并在DOM：<li class="third">three</li>中从ol列表中返回它。据我所知，document.querySelector只选择文档中的第一个元素，即document.querySelector('li.third')。我将如何做相反的选择最后一个？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-01-07 06:18:54
为了得到你的项目，你需要正确地选择。这意味着当您要选择.third时，需要进行特定的操作。
选择#container -> ol -> ( li:last-child或li.third)的序列
document.querySelector("#container > ol > li.third");Stack Overflow用户
发布于 2020-01-07 06:11:09
如果有混合子元素，则可以使用*:last-child。
console.log(document.querySelector('#container *:last-child .third').textContent);<section id="container">
<ul>
<li class="first">one</li>
<li class="second">two</li>
<li class="third">three</li>
</ul>
<ol>
<li class="first">one</li>
<li class="second">two</li>
<li class="third">three (here)</li>
</ol>
</section>
您还可以通过以下两种方法之一抓取最后一个孩子：
#container *:last-child li:last-of-typeor#container *:last-child li:last-child
Stack Overflow用户
发布于 2020-01-07 06:14:20
你可以使用document.querySelector('ol li:最后一个孩子‘)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59630017
复制相关文章
相似问题
腾讯云开发者
