JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<form id="f1" hidden>
    <input type="text" />
</form>

<form id="f2">
    <input type="text" />
</form>

<form id="f3" style="display: none;">
    <input type="text" />
</form>

<form id="f4">
    <input type="text" />
</form>

<textarea id="consoleArea" readonly></textarea>

CSS

#consoleArea {
    width: 512px;
    height: 256px;
    background-color: #303030;
    color: #7DB482;
    font-size: 14px;
    font-family: "Lucida Console", Monaco, monospace;
    resize: none;
    margin: 15px 0;
}

JavaScript

var consoleArea = document.getElementById('consoleArea'),
    SEPARATOR = Array.prototype.join.call(new Array(32), '-');

function log(s) {
    consoleArea.value += s + "\n";
}

function logSectionTitle(title) {
    log(SEPARATOR);
    log(title);
    log(SEPARATOR);
}

function isVisible(el) {
    return el.style.display != 'none' && !el.hidden;
}

/* This is working pretty well: */
var formElement = [];
for (i=0,l=document.forms.length;i<l;i++){
   var formIndex = document.forms.item(i);
   if (isVisible(formIndex)){
       formElement.push(formIndex);
       log('Form ' + formIndex.id + ' is visible');
  }
}
  
logSectionTitle('Pure JavaScript approach:');
for(var i = document.forms.length; 0 < i--;) {
    log('Form #' + i + ': ' + isVisible(document.forms[i]));
}

logSectionTitle('jQuery approach:');

log('check is element visible:');

$('form').each(function(i, form) {
    log('Form #' + i + ': ' + $(form).is(':visible'));
});

log('find all visible:');
var visibleForms = $('form:visible');
log('total visible forms: ' + visibleForms.length);

log('find all invisible:');
var invisibleForms = $('form:hidden');
// or var invisibleForms = $('form:not(:visible)');
log('total invisible forms: ' + invisibleForms.length);