使用 previousElementSibling 获取非隐藏元素

Question

我有一长串物品。其中一个是活跃的。我想从那个活动项目转到上一个。我可以用 previousElementSibling.

问题是我想跳过隐藏元素。我该怎么做？

const active = document.querySelector('.active');
const prev = active.previousElementSibling;
console.log(active);
console.log(prev);

<div></div>
<div hidden></div>
<div class="active"></div>

在现实世界中，该列表是动态的并且更长，因此没有疯狂的破解方法。

Answer 1

您可以继续查找之前的元素，直到找到未隐藏的元素或到达第一个元素为止：

const active = document.querySelector('.active');
let prev = active.previousElementSibling;
while (prev !== null) {
  if (!prev.hidden) break;
  prev = prev.previousElementSibling;
}
console.log(active);
console.log(prev);

Answer 2

您可以通过循环重复遍历 previousElementSibling 的元素来执行此操作，直到找到一个未隐藏的元素。例如：

const active = document.querySelector('.active');

// Get the previous sibling
let result = active.previousElementSibling;

// If it's hidden, continue back further, until a sibling isn't hidden
while (result && result.hidden == true) {
   result = result.previousElementSibling;
}

if (result) {
  // You got a non-hidden sibling!
  console.log(result);
} else {
  // There is no previous sibling that's not hidden
}

使用 previousElementSibling 获取非隐藏元素

Get non hidden element with previousElementSibling

javascript

siblings

selector