Javascript zählen sichtbare Elemente

Question

Ich habe die Foren gesucht, aber keine spezifische Hilfe in Bezug auf mein Problem finden. Ich versuche, eine Anwendung zu entwerfen, die Javascript verwendet, das div Elemente zählt, die entweder verborgen oder sichtbar sind.

I

document.getElementById("div-element").childElementCount; 

bin mit und so etwas wie verwenden:

document.querySelectorAll('#div-element .dic-class').length; 

welche beide Arbeit wie vorgesehen durch die gesamten Elemente zurück.

ich die Sichtbarkeit bestimmter div Elemente am Wechsel von:

document.getElementById('div-element').style.display == "block or none"; 

Answer 1

Für so etwas wie diese Array.prototype.filter in dem Sinne kommt (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), aber man kann das nicht auf einem nodelist verwenden, das, was Sie ist erhalten, wenn querySelectorAll verwendet, so würde ich dieses Problem lösen, indem die nodelist auf ein Array konvertieren, dann Verwenden Sie dazu filter.

Um eine Nodelist in ein Array zu umwandeln:

var array = [].slice.call(someNodeList); 

(https://davidwalsh.name/nodelist-array)

So können wir dies tun:

//gives node list 
divs = document.querySelectorAll('#div-element > div'); 
//convert to an array 
var divsArray = [].slice.call(divs); 
//so now we can use filter 
//find all divs with display none 
var displayNone = divsArray.filter(function(el) { 
    return getComputedStyle(el).display === "none" 
}); 
//and all divs that are not display none 
var displayShow = divsArray.filter(function(el) { 
    return getComputedStyle(el).display !== "none" 
}); 
//and use length to count 
var numberOfHiddenDivs = displayNone.length; 
var numberOfVisibleDivs = displayShow.length; 

einfach eine Anmerkung: es ist wichtig getComputedStyle zu verwenden (https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) anstelle von element.style, da element.style nicht die Eigenschaften widerspiegelt, die von css angewendet werden, sondern nur inlin Die Stile.

zweite Note dies nur zählt "display:none;" als versteckt, wenn Sie wollen auch visibility:hidden; oder einige andere Kriterien sind, verwenden

var displayNone = divsArray.filter(function(el) { 
    return getComputedStyle(el).display === "none" || 
     getComputedStyle(el).visibility === "hidden" 
}); 
//and all divs that are not display none 
var displayShow = divsArray.filter(function(el) { 
    return !(getComputedStyle(el).display === "none" || 
     getComputedStyle(el).visibility === "hidden") 
}); 

Demo:

//gives node list 
 
divs = document.querySelectorAll('#div-element > div'); 
 
//convert to an array 
 
var divsArray = [].slice.call(divs); 
 
//so now we can use filter 
 
//find all divs with display none 
 
var displayNone = divsArray.filter(function(el) { 
 
    return getComputedStyle(el).display === "none" 
 
}); 
 
//and all divs that are not display none 
 
var displayShow = divsArray.filter(function(el) { 
 
    return getComputedStyle(el).display !== "none" 
 
}); 
 
//and use length to count 
 
var numberOfHiddenDivs = displayNone.length; 
 
var numberOfVisibleDivs = displayShow.length; 
 
alert("hidden:"+numberOfHiddenDivs+", visible:"+numberOfVisibleDivs);

#div-element > div{ 
 
    width:100px; 
 
    height:50px; 
 
    border:1px solid gold; 
 
    background-color:red; 
 
} 
 
div.hide{ 
 
    display:none; 
 
}

<div id='div-element'> 
 
    <div class=hide></div> 
 
    <div class=hide></div> 
 
    <div class=hide></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div class=hide></div> 
 
    <div></div> 
 
    <div class=hide></div> 
 
    <div></div> 
 
    <div style=display:none;></div> 
 
    <div style=display:none;></div> 
 
</div>

Answer 2

Schleife der Elemente und dann können Sie den Stil überprüfen, indem offsetParent Überprüfung, drücken Sie dann auf ein Array.

var elem = document.querySelectorAll('#div-element .dic-class'); 
 
var visible = []; 
 
for (i = 0; i < elem.length; i++) { 
 
    _this = elem[i]; 
 
    if (_this.offsetParent !== null) 
 
    visible.push(elem[i]); 
 
} 
 
alert(visible.length);

#div-element { 
 
    display: none; 
 
}

<div id="div-element"> 
 
    <div class="dic-class"></div> 
 
</div>

Answer 3

Sie können den NodeList in ein Array umwandeln und dann reduce gelten die Anzahl der Elemente zu erhalten, die keine Inline-Set nicht das Display hat:

var divs = Array.prototype.slice.call(document.querySelectorAll('#div-element .dic-class')); 
 

 
console.log(divs.reduce(function(a, b){return a + (b.style.display != "none" ? 1 : 0)}, 0))

.dic-class { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: green; 
 
    border: 1px solid black; 
 
}

<div id="div-element"> 
 
    <div class="dic-class"></div> 
 
    <div class="dic-class"></div> 
 
    <div class="dic-class" style="display: none"></div> 
 
    <div class="dic-class" style="display: none"></div> 
 
    <div class="dic-class"></div> 
 
</div>

Wenn Sie überprüfen möchten, gilt Regeln (nicht nur inline), können Sie stattdessen getComputedStyle verwenden.

Answer 4

Während Sie die Sichtbarkeit bestimmter d ändern iv Elemente durch document.getElementById('div-element').style.display = "none"; die Anzahl der sichtbaren und verborgenen Elemente können einfach durch die Kontrolle einer „erzeugt“ style display Attribut ausgeführt werden:

var countHidden = document.querySelectorAll("#div-element .dic-class[style='display: none;']").length; 
var countVisible = document.querySelectorAll("#div-element .dic-class:not([style='display: none;'])").length; 

Answer 5

Dies ist mein erstes Mal mit diesem Forum und wow so gut und schnell Antworten.

landete ich ChillNUT den Code und das Endergebnis ist dieses:

function IconCount() { 
divs = document.querySelectorAll('#IconFX > div'); 
var divsArray = [].slice.call(divs); 
var displayNone = divsArray.filter(function(el) { 
return getComputedStyle(el).display === "none" 
}); 
var displayShow = divsArray.filter(function(el) { 
return getComputedStyle(el).display !== "none" 
}); 
var numberOfHiddenDivs = displayNone.length; 
var numberOfVisibleDivs = displayShow.length; 
document.getElementById('VisibleIcons').innerHTML = numberOfVisibleDivs; 
document.getElementById('HiddenIcons').innerHTML = numberOfHiddenDivs; 
} 

So kann ich dies als eine Funktion aufrufen kann, wenn etwas versteckt oder sichtbar und können mit diesen Ausgangswerten mit einem anderen Skript interagieren.