如何在不使用 ID 的情况下在 ul 中定位 li？
[英]How to target li within ul without using IDs?
问题描述
I'm trying to attach eventListeners to each of these li within a ul of my HTML.
我正在尝试将 eventListeners 附加到我的 HTML 的 ul 中的每个 li。 This is for a homework assignment, so I cannot alter the HTML at all.这是一个家庭作业，所以我根本无法更改 HTML。 Here is my HTML, the li I am trying to alter are the two buttons within the ul class 'pagination':这是我的 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>
I tried this in my JavaScript:我在我的 JavaScript 中试过这个：
let nextButton = pageSection.getElementsByTagName('li:first-of-type');
let prevButton = pageSection.getElementsByTagName('li:last-of-type');
However, if I console.log(nextButton) or console.log(prevButton), they both return as HTMLcollection [] within the browser console.但是，如果我使用 console.log(nextButton) 或 console.log(prevButton)，它们都会在浏览器控制台中返回 HTMLcollection []。 I'm not sure if it is targeting it right.我不确定它的目标是否正确。
Here is an example of the eventListener:下面是一个事件监听器的例子：
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]);
}
});
But it returns as this error within the browser: Uncaught TypeError: nextButton.addEventListener is not a function但它在浏览器中返回此错误： Uncaught TypeError: nextButton.addEventListener is not a function
I just started learning JavaScript and HTML this week, so I'm not well-versed yet.我这周才开始学习 JavaScript 和 HTML，所以我还不精通。 Also, I cannot use JQuery or any kind of frameworks!另外，我不能使用 JQuery 或任何类型的框架！
Thanks for your help!谢谢你的帮助！
3 个解决方案
解决方案1
1 已采纳 2019-11-06 20:57:20
Since you know you have two li 's insides of .pagination , you can use document.querySelectorAll , which returns an array of elements.既然你知道你有两个li的.pagination内部，你可以使用document.querySelectorAll ，它返回一个元素数组。 Simply target the index of the element in the array.只需定位数组中元素的索引即可。 Example:例子：
let navButtons = document.querySelectorAll('.pagination li');
let prevButton = navButtons[0];
let nextButton = navButtons[1];
prevButton.addEventListener('click', (event) => {
});
nextButton.addEventListener('click', (event) => {
});
解决方案2
0 2019-11-06 20:57:09
document.getElementsByTagName("LI") document.getElementsByTagName("LI")
This will return you a list of all the li tags.这将为您返回所有 li 标签的列表。 Loop over that list, select by index, do whatever you want with it.循环遍历该列表 select 按索引，随心所欲。
Since you have no other li in the body you don't really need to worry about any special selectors因为你没有其他的 li 在你的身体里你真的不需要担心任何特殊的选择器
"li:last-of-type" isn't correct but getElementsByTagName is only looking to accept a tag name to look for. "li:last-of-type" 不正确，但 getElementsByTagName 只是希望接受要查找的标签名称。 Not any special sudo classes没有任何特殊的 sudo 类
解决方案3
0 2019-11-06 21:01:32
try it:试试看：
let nextButton = document.getElementsByClassName("pagination")[0].children[0]
let prevButton = document.getElementsByClassName("pagination")[0].children[1]
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.