Javascript 在分区内迭代分区

发布于04月24日

如何在一个分区内搜索分区，如果它们都具有相同的"显示"值("无")，则显示消息？我只是在学习，我需要百分百使用它 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.eachtry 过

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

推荐答案

您当前逻辑的问题在于，您正在单独测试每.test2个分区，然后根据该单个元素输出消息.相反，您需要首先判断all个元素，然后在必要时输出消息.

为此，您可以存储一个标志来确定分区的状态，然后如果其中任何一个分区与该状态不匹配，则更改该标志.这是一个工作示例:

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>

也可以通过使用:visible Select 器在没有显式循环的情况下实现这一点:

jQuery($ => {
  if (!$('.test1 > .test2:visible').length) {
    $('.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>

最后，请注意，在上面的例子中，我使用了一个简写document.ready处理程序，它对$变量进行了别名.这意味着您可以安全地使用$前置字而不是详细的jQuery关键字，而不会影响任何其他可能也使用$的脚本.