Javascript Count Visible Elements

I have been searching the forums but unable find any specific help in relation to my problem. I am trying to design an application using javascript which will count div elements wh

Solution 1:

For something like this Array.prototype.filter comes to mind (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), but you can't use that on a nodelist, which is what you get when using querySelectorAll, so I would solve this by converting the nodelist to an array, then use filter on that.

To convert a nodelist to an array:

vararray = [].slice.call(someNodeList);

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

So, we can do this:

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

Just a note: its important to use getComputedStyle (https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) rather than element.style because element.style will not reflect properties applied by css, it will only reflect inline styles.

Second note, this only counts "display:none;" as hidden, if you also want to include visibility:hidden; or some other criteria, use

var displayNone = divsArray.filter(function(el) {
    returngetComputedStyle(el).display === "none" ||
        getComputedStyle(el).visibility === "hidden"
});
//and all divs that are not display nonevar 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 arrayvar divsArray = [].slice.call(divs);
//so now we can use filter//find all divs with display nonevar displayNone = divsArray.filter(function(el) {
    returngetComputedStyle(el).display === "none"
});
//and all divs that are not display nonevar displayShow = divsArray.filter(function(el) {
    returngetComputedStyle(el).display !== "none"
});
//and use length to countvar 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;
}

<divid='div-element'><divclass=hide></div><divclass=hide></div><divclass=hide></div><div></div><div></div><div></div><divclass=hide></div><div></div><divclass=hide></div><div></div><divstyle=display:none;></div><divstyle=display:none;></div></div>

Solution 2:

While you are changing the visibility of specific div elements by document.getElementById('div-element').style.display = "none"; the count of visible and hidden elements can be easily performed by checking a "generated" style display attribute:

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;

Solution 3:

Loop the items and then you can check the style by checking offsetParent , then push to an 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;
}

<divid="div-element"><divclass="dic-class"></div></div>

Solution 4:

You can convert the NodeList into an array and then apply reduce to get the number of elements that don't have the display set to none inline:

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

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

If you want to check for applies rules (not just inline ones), you can use getComputedStyle instead.

Solution 5:

This is my first time using this forum and wow such good and fast replies.

I ended up using ChillNUT's code and the end result is this:

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

This way I can call this as a function when anything is hidden or visible and can interact with these output values with another script.