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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

仅供参考： CSS中的display属性没有hidden值。对于隐藏元素，我们使用none作为属性值

Answer 2

console.log($('#demodv label:not([style="display:hidden"])').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: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>

使用类似的东西：

选择使用未隐藏的属性。

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

2 个答案: