[英]How to target li within ul without using IDs?
我正在尝试将 eventListeners 附加到我的 HTML 的 ul 中的每个 li。 这是一个家庭作业，所以我根本无法更改 HTML。 这是我的 HTML，我要更改的是 ul class '分页'中的两个按钮：
<body>
<!-- Gallery HTML -->
<section id="gallery">
<h2>Image <strong>Gallery</strong></h2>
<!-- Gallery Image & Details -->
<article>
<p><img
src="images/winter.jpg"
alt="Winter Landscape: Snow covered mountains">
</p>
<h3>Image Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<!-- Thumbnail Pagination -->
<ul class="pagination">
<li><button>previous</button></li>
<li><button>next</button></li>
</ul>
</section>
<!-- Javascript -->
<script src="js/gallery.js"></script>
</body>
我在我的 JavaScript 中试过这个：
let nextButton = pageSection.getElementsByTagName('li:first-of-type');
let prevButton = pageSection.getElementsByTagName('li:last-of-type');
但是，如果我使用 console.log(nextButton) 或 console.log(prevButton)，它们都会在浏览器控制台中返回 HTMLcollection []。 我不确定它的目标是否正确。
下面是一个事件监听器的例子：
nextButton.addEventListener("click", function changeImageNext(){
for (i = 0; i < templateArray.length; i++){
// console.log(articles[i]+ " " + i);
activeArticle = articles.length[i + 1];
// inserts the updated html into the html file
galleryHeading.insertAdjacentHTML('afterend',templateArray[i]);
}
});
但它在浏览器中返回此错误： Uncaught TypeError: nextButton.addEventListener is not a function
我这周才开始学习 JavaScript 和 HTML，所以我还不精通。 另外，我不能使用 JQuery 或任何类型的框架！
谢谢你的帮助！
既然你知道你有两个li的.pagination内部，你可以使用document.querySelectorAll ，它返回一个元素数组。 只需定位数组中元素的索引即可。 例子：
let navButtons = document.querySelectorAll('.pagination li');
let prevButton = navButtons[0];
let nextButton = navButtons[1];
prevButton.addEventListener('click', (event) => {
});
nextButton.addEventListener('click', (event) => {
});
document.getElementsByTagName("LI")
这将为您返回所有 li 标签的列表。 循环遍历该列表 select 按索引，随心所欲。
因为你没有其他的 li 在你的身体里你真的不需要担心任何特殊的选择器
"li:last-of-type" 不正确，但 getElementsByTagName 只是希望接受要查找的标签名称。 没有任何特殊的 sudo 类
试试看：
let nextButton = document.getElementsByClassName("pagination")[0].children[0]
let prevButton = document.getElementsByClassName("pagination")[0].children[1]
如何在没有任何ID的情况下以javascript DOM中ul和li中的某个元素为目标
[英]How to target a certain element in ul and li in javascript DOM without any IDs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.