代码之家 › 专栏 › 技术社区 › Borja

如果父项被隐藏,是否可以计算可见子项?

css3 jquery javascript

Borja · 技术社区 · 6 年前

我不知道是否可以这样做…所以我想要一个解释。

我有这种情况:

   <div id="grandfather" style="display:none">
    <div id="ipocentro-quakes">
      <div></div>
      <div></div>
      <div style="display:none"></div>
      <div></div>
    </div>
   </div>

    var selezioni_attive= ($('#ipocentro-quakes > div:visible').length)-1;

我希望输出如下二因为我不考虑第一个孩子和所有隐藏的孩子(在我的情况下只有一个,第三个)。

但我的产出是 -1个 .

如果有可能的话 #grandfather 具有 display:none ?

非常感谢,很抱歉我的英语

4 回复 | 直到 6 年前

jh314 6 年前

你需要使用 :not(:firstchild) 跳过第一个元素,然后 not([style*="display: none"]) 跳过元素 display:none :

var selezioni_attive = 
    ($('#ipocentro-quakes > div:not(:firstchild):not([style*="display: none"])').length)-1;

colxi 6 年前

您可以检索子列表,并对其进行迭代,逐个检查每个子元素的可见性:

在Vanila JS中:

let count = 0;
let parent = document.getElementById('ipocentro-quakes');
Array.from(parent.children).forEach( e=>{
  // get child index
  let index = Array.prototype.indexOf.call(parent.children, e);
  // ignore first child
  if(index===0)  return;
  // get style of child
  var style = window.getComputedStyle(e);
  // if it's visible, increase counter
  if (style.display !== 'none') count++;
})
console.log('total visible:',count)

<div id="grandfather" style="display:none">
  <div id="ipocentro-quakes">
    <div></div>
    <div></div>
    <div style="display:none"></div>
    <div></div>
  </div>
 </div>

紧凑型

由@Jaromanda-X在评论中提供

let count = Array.from(parent.children).slice(1).filter(e => window.getComputedStyle(e).display !== 'none').length;

Mr. Brickowski 6 年前

jQuery文档如下:

如果元素占用文档中的空间,则认为它们是可见的。可见元素的宽度或高度大于零。

https://api.jquery.com/visible-selector/

因为divs的父母是 display:none

用类名怎么样

$(document).ready(function() {
  var selezioni_attive = $("#ipocentro-quakes > div:not(.invisible)").length;

  console.log(selezioni_attive);
});

.invisible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grandfather" style="display:none">
  <div id="ipocentro-quakes">
    <div></div>
    <div></div>
    <div class="invisible"></div>
    <div></div>
  </div>
</div>

vol7ron 6 年前

是的,有可能:

let found = $('#grandfather')
              .find(':not(:first-child)')
              .filter((i, el) => el.style.display != 'none')
              .length;

console.log(found)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grandfather" style="display:none">
  <div id="ipocentro-quakes">
    <div></div>
    <div></div>
    <div style="display:none"></div>
    <div></div>
  </div>
</div>

选择祖先
找到所有不是第一个孩子的东西
只过滤掉那些可见的