如何使用javascript僅按名稱計算元素長度而不顯示無？

Question

如何僅按名稱計算元素長度而不display:none使用 javascript 不display:none ？

我想通過getElementsByName計算元素長度，但不display:none使用。

下面的代碼，它計算所有name="test[]"並且它是警報5

我想只計算name="test[]"不顯示 none （ 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

您可以對節點的樣式和顯示屬性進行比較。

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