检查所有子元素是否有 display:none

Question

我正在寻找一种方法来确定 #container 的所有子 div 上是否都有 display:none。 I can't use :visible 因为container 本身是一个隐藏的面板，可以打开（使其可见）和关闭（再次隐藏）。

目标是在面板完全为空时删除“点击打开容器面板”文本，并在至少显示一个子 div 时再次显示。

不同的子 div 在我的代码的其他部分独立显示和关闭。

我试过了：

function check_if_all_divs_are_hidden()
{
    if($('#container').children().css('display') == 'none') {
      //hide text
    }
    else
    {
      //show text
    }
}

但这不起作用，因为如果一个div具有display:none属性，它将隐藏文本，而只有当所有div都具有该属性时才应该隐藏文本。

Answer 1

检查一下。

$('.check-btn').on('click', function() {
  if($('.item').length === $('.hidden').length)   {
    //hide text
    console.log('same');
  } else {
    //Show Text
    console.log('different');
  }
})

.item {
  display: inline-block;
  width: 300px;'
  height: 300px;
  border: 1px solid #ddd;
  text-align: center
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='#container'>
  <span class='item hidden'>1</span>
  <span class='item hidden'>2</span>
  <span class='item hidden'>3</span>
  <span class='item'>4</span>
  <span class='item hidden'>5</span>
  <span class='item hidden'>6</span>
</div>

<button class='check-btn'>Check</button>

Answer 2

$(document).ready(function(){
  $('.toggle').on('click', function() {
    if($(this).next('.content').hasClass('active')){
      $(this).text('Show');
      $(this).next('.content').removeClass('active');
    }else{
      $(this).text('Hide');
      $(this).next('.content').addClass('active');
    }
  });
});

.content{
  display:none;
}

.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='#container'>
  <span class='item'>1</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 1</div>
  <hr>
  <span class='item'>2</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 2</div>
  <hr>
  <span class='item'>3</span>
  <button type="button" class="toggle">Show</button>
  <div class="content">Some 3</div>
</div>

你也可以使用这样的东西：D

Answer 3

你可以试试这个：

function check_if_all_divs_are_hidden()
{
    // Hide text
    $('#container').children().each((idx,elt)=>{
        if($(elt).children().css('display') != 'none') {
           //show text
        }
    })
}

这样，如果所有孩子都被隐藏，它将隐藏文本，如果至少有一个可见，则显示它

Answer 4

也许使用变量来存储状态会更容易。例如，如果您有多个目标。

     var childrenState = {};
        function open() {
            childrenState[id] = true;
        }

for (var i in childrenState) {
    if (childrenState[i]) {
       showText();
    }
}

Answer 5

我稍微修改了minitauros' answer，得到了一个可行的解决方案：

function check_if_all_are_hidden()
{
    all_are_hidden = true;
    $("#container").children().each(function(){
        if($(this).css('display') !== 'none')
        {
            all_are_hidden = false;
            return false;
        }
    });

    if (all_are_hidden) {
        console.log("all hidden");
    } else {
        console.log("some are open");
    }
}

将在 2 天内将此标记为正确答案，除非有人找到更好的方法。

Answer 6

类似的东西呢

function check_if_all_divs_are_hidden() {
  let all_are_hidden = true;

  $('#container').children().each(child => {
    if ($(child).css('display') !== 'hidden') {
      all_are_hidden = false;
      return false; // Break as we've found one child that isn't hidden, which means not all are hidden.
    }
  });

  if (all_are_hidden) {

  } else {

  }
}

Answer 7

请尝试以下代码。

 $('#container >div').each(function(){ 
          if($(this).css('display') == 'none') {
              //hide text
            }
            else
            {
              //show text
            }
     });