使用JavaScript僅查找可見元素

Question

我正在努力將JQuery項目覆蓋為純JavaScript，並且受困於以下代碼。

$(".element-has-class:visible")

我認為也許可以遵循這些原則來捕獲所有可見元素（對於我的項目列表項），但是我沒有運氣：

function functionName (){
  var elementsOnShow = document.getElementsByClassName('element-has-class').find(isVisible);
}

function isVisible(element) {
  return element.style.display === 'block';
}

（已在CSS中設置了代碼block ）。 無論如何，是否將所有可見元素都包含在一個變量中？

Answer 1

您可以將nodeList轉換為Array（ 在此處了解更多信息 ），這將允許您使用Array.prototype.filter()獲取可見元素：

function functionName (){
  var myNodeList = document.getElementsByClassName('element-has-class'),
      myArray = [].slice.call(myNodeList),
      elementsOnShow = myArray.filter(isVisible);
}

function isVisible(element) {
  return element.offsetWidth > 0
      || element.offsetHeight > 0
      || element.getClientRects().length > 0;
}

您在上面看到的isVisible函數是從jQuery 2.2.4的源代碼中提取的（版本3.XX與IE 8及更低版本不兼容）。