迭代div内的div

Question

如何迭代一个 div 内的 div，并且如果它们都具有相同的“显示”值（“无”），则显示一条消息？ 我刚刚学习，我需要百分百使用它 jQuery

<div class="test1">
 <div class="test2" style="display:none">
  
 </div>
 <div class="test2" style="display:none">
  
 </div>
 <div  class="test2" style="display:none">
  
 </div>
 <div  class="test2" style="display:none">
  
 </div>
</div>

我尝试使用 jQuery.each

  jQuery('.test1 > .test2').each(function(){
    if(jQuery(this).css('display') == 'none'){
        jQuery('.test_message').text('nothing');
    }
})

Answer 1

您当前逻辑的问题是您正在单独测试每个

.test2

div，然后根据该单个元素输出消息。相反，您需要先检查所有元素，然后在必要时输出消息。

为此，您可以存储一个标志来确定 div 的状态，然后在其中任何一个与该状态不匹配时更改该标志。这是一个工作示例：

jQuery($ => {
  let allHidden = true;

  $('.test1 > .test2').each(function() {
    if ($(this).css('display') !== 'none') {
      allHidden = false;
      return;
    }
  })

  if (allHidden) {
    $('.test_message').text('nothing');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="test1">
  <div class="test2" style="display:none"></div>
  <div class="test2" style="display:none"></div>
  <div class="test2" style="display:none"></div>
  <div class="test2" style="display:none"></div>
</div>

<div class="test_message"></div>