Question

如何使用javascript计算元素长度而不是display:none？

我希望getElementsByName只计算display:none使用的元素长度。

以下代码，它会计算所有name="test[]"并且它是警报5

我想计算name="test[]"只显示无（result will be 3）。我怎么能这样做？

<div name="test[]"></div>
<div name="test[]"></div>
<div name="test[]"></div>
<div name="test[]" style="display: none;"></div>
<div name="test[]" style="display: none;"></div>

<script>
var test = document.getElementsByName("test[]");
alert (test.length);
</script>

https://jsfiddle.net/Lp6sn3w4/

Answer 1

您需要遍历节点并检查其样式。要轻松迭代节点，您需要首先将NodeList（从getElementsByName返回）转换为常规数组。然后，您可以按显示样式值进行过滤，并获取数组的长度：

var test = document.getElementsByName("test[]");
var nodes = Array.prototype.slice.call(test);

nodes.filter(function(node) {
  return node.style.display !== "none"
}).length

Answer 2

您可以对节点的样式和显示属性进行比较。

＆＃13;

var test = document.getElementsByName("test[]"),
    count = Array.prototype.slice.call(test).reduce(function (r, a) {
        return r + +(a.style.display !== 'none');
    }, 0);

document.write(count);

＆＃13;

如何按名称计算元素长度只是不使用javascript显示无？

2 个答案: