[英]How can I identify the previous/next link in a sequence of unordered and/or nested lists using vanilla Javascript?
I'm trying to wrap my head around this scenario. 我正在努力解决这种情况。
Using vanilla Javascript, I need to identify the previous and next <a>
elements, given any given link within n -number of unordered lists of n depth. 使用vanilla Javascript,我需要确定前一个和下一个
<a>
元素,给定n中n个深度为n的无序列表中的任何给定链接。
So here's an example structure of what I mean: 因此,这是我的意思的示例结构:
<ul>
<li><a href="http://www.example.com/">Link 1</a></li>
<li><a href="http://www.example.com/">Link 2</a></li>
<li><a href="http://www.example.com/">Link 3</a></li>
</ul>
<ul>
<li><a href="http://www.example.com/">Link 4</a></li>
<li><a href="http://www.example.com/">Link 5</a>
<ul>
<li><a href="http://www.example.com/">Link 6</a></li>
<li><a href="http://www.example.com/">Link 7</a></li>
</ul></li>
<li><a href="http://www.example.com/">Link 8</a></li>
</ul>
<ul>
<li><a href="http://www.example.com/">Link 9</a></li>
</ul>
Link 8's previous is Link 7 and its next is Link 9. Link 8的上一个是Link 7,下一个是Link 9。
Link 9's previous is Link 8 and its next is Link 1. Link 9的前一个是Link 8,下一个是Link 1。
And so on. 等等。
At one level of structure, I was able to work this out with something like this: 在结构的一个层次上,我可以通过以下方式解决此问题:
function linkNext(currentFocus) {
currentFocus = currentFocus || document.activeElement;
var theNextElement;
if (currentFocus.parentNode.nextElementSibling === null) { // Last <li> in list.
if (currentFocus.parentNode.parentNode.nextElementSibling === null) { // Last list in bar.
theNextElement = window.barbarbar.querySelector('a');
} else {
theNextElement = currentFocus.parentNode.parentNode.nextElementSibling.querySelector('a');
}
} else {
theNextElement = currentFocus.parentNode.nextElementSibling.querySelector('a');
}
return theNextElement;
}
function linkPrev(currentFocus) {
currentFocus = currentFocus || document.activeElement;
var thePrevElement;
if (currentFocus.parentNode.previousElementSibling === null) { // First <li> in list.
if (currentFocus.parentNode.parentNode.previousElementSibling === null) { // First list in bar.
thePrevElement = window.barbarbar.querySelector('a:last-of-type');
} else {
thePrevElement = currentFocus.parentNode.parentNode.previousElementSibling.querySelector('li:last-of-type a');
}
} else {
thePrevElement = currentFocus.parentNode.previousElementSibling.querySelector('a');
}
return thePrevElement;
}
But this stops working beyond that single level of depth and I'm having difficulty wrapping my head around a potential solution. 但是,这超出了单一的深度范围,无法继续工作,我很难将注意力集中在潜在的解决方案上。 And even if I were using jQuery (which I'm not), even something like
.closest()
or .parents()
doesn't seem like it would quite fit. 即使我使用的是jQuery(不是),即使
.closest()
或.parents()
类的东西似乎也不适合。
Is there perhaps a better method of doing this? 也许有更好的方法吗? Do I really even need to do tree traversal here?
我真的需要在这里遍历树吗?
It seems to me that you just need to keep a list of all links and find the position of the current link: 在我看来,您只需要保留所有链接的列表并找到当前链接的位置:
var links = Array.prototype.slice.call(document.querySelectorAll('a'));
var index = links.indexOf(currentFocus);
// nextLink = links[index - 1];
// previousLink = links[index + 1];
(plus some logic for wrapping around) (加上一些环绕逻辑)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.