javascript - 使用 jquery/javascript 读取 div 内的所有标签

Question

我有一个 div，其中的标签有些是隐藏的，有些是可显示的。

我想读取所有未隐藏的标签。

示例:

<div id="demodv">
<label id="lbl_1"></label>
<label id="lbl_2" style="display:hidden"></label>
<label id="lbl_3"></label>
<label id="lbl_4" style="display:hidden"></label>
<label id="lbl_5"></label>
<label id="lbl_6" style="display:hidden"></label>
<label id="lbl_7"  style="display:hidden"></label>
</div>

Answer 1

使用:visible伪类选择器。

$('#demodiv label:visible')

console.log($('#demodv label:visible').length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demodv">
  <label id="lbl_1">1</label>
  <label id="lbl_2" style="display:none">1</label>
  <label id="lbl_3">1</label>
  <label id="lbl_4" style="display:none">1</label>
  <label id="lbl_5">1</label>
  <label id="lbl_6" style="display:none">1</label>
  <label id="lbl_7" style="display:none">1</label>
</div>

<小时/> 更新:但它会将空元素(没有任何子节点的元素)视为隐藏，因此使用 filter()方法(如果您想包含它们)。

$('#demodv label').filter(function() {
  return this.style.display != 'none'
})

console.log($('#demodv label').filter(function() {
  return this.style.display != 'none'
}).length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demodv">
  <label id="lbl_1"></label>
  <label id="lbl_2" style="display:none"></label>
  <label id="lbl_3"></label>
  <label id="lbl_4" style="display:none"></label>
  <label id="lbl_5"></label>
  <label id="lbl_6" style="display:none"></label>
  <label id="lbl_7" style="display:none"></label>
</div>

<小时/>

仅供引用: display 没有隐藏值CSS 中的属性。为了隐藏元素，我们使用 none 作为属性值