Suche nur sichtbare Elemente mit JavaScript

Question

Ich arbeite an der Umwandlung eines JQuery-Projekts in reines JavaScript und ich bin mit dem folgenden Bit des Codes fest.

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

Ich dachte, vielleicht etwas in dieser Richtung könnte das gesamte sichtbare Element zu fangen arbeiten (im Falle meiner Projektliste Artikel), aber ich habe kein Glück gehabt:

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

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

(block hat in der CSS einstellen). Gibt es überhaupt irgendwelche sichtbaren Elemente innerhalb einer Variablen?

Answer 1

Sie können Ihre nodeList einem Array (read more about it here), die Sie Array.prototype.filter() erhalten die sichtbaren Elemente zu verwenden, ermöglicht es konvertieren:

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; 
} 

Die isVisible Funktion sehen Sie oben von jQuery 2.2.4 der Quelle extrahiert Code (Version 3.XX ist nicht kompatibel mit IE 8 und darunter).