Question

我一直在搜索论坛，但无法找到与我的问题相关的任何具体帮助。我正在尝试使用javascript设计一个应用程序，它将计算隐藏或可见的div元素。

我正在使用

@menu.first.each { |dish| puts "Item: #{dish.name}. Price: £#{dish.price}" }

可以使用类似的东西：

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

通过返回总元素，两者都可以正常工作。

我正在通过以下方式更改特定div元素的可见性：

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

Answer 1

循环项目然后您可以通过选中offsetParent来检查样式，然后推送到数组。

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 2

您可以将NodeList转换为数组，然后应用reduce以获取未将显示设置为无内联的元素数量：

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>

如果您想检查应用规则（而不仅仅是内联规则），则可以改为使用getComputedStyle。

Answer 3

对于类似这样的内容Array.prototype.filter，我会想到nodelist），但您无法在querySelectorAll上使用它，这是您在使用nodelist时获得的内容，所以我会通过将filter转换为数组，然后在其上使用var array = [].slice.call(someNodeList);来解决此问题。

将节点列表转换为数组：

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

（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter）

所以，我们可以这样做：

getComputedStyle

请注意：使用element.style（https://davidwalsh.name/nodelist-array）而不是element.style非常重要，因为"display:none;"不会反映css应用的属性，它只会反映内联样式

第二个注意事项，这只会将visibility:hidden;视为隐藏，如果您还想包含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") });或其他一些条件，请使用

//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>

{{1}}

Answer 4

当您通过document.getElementById('div-element').style.display = "none";更改特定div元素的可见性时，可以通过选中＆＃34;生成的＆＃34;来轻松执行可见元素和隐藏元素的计数。 style display属性：

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

这是我第一次使用这个论坛，并且发出了如此好的快速回复。

我最终使用了ChillNUT的代码，最终结果如下：

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

这样，当隐藏或可见任何内容时，我可以将其称为函数，并且可以使用其他脚本与这些输出值进行交互。

javascript计数可见元素

5 个答案: