如果所有 div 具有相同的样式，则删除元素

Question

我有多个具有相同名称的 div，我想检查所有 div 是否具有显示样式：无；然后另一个 div 也会隐藏。密码笔：- https://codepen.io/scottYg55/pen/OexpgR `

jQuery(".tile").each(function () {
  if (jQuery(this).css("display") == "none") { 
    $(".hideme").hide(); 
  }
});

.tiles {
  width:100%;
  height:100%;
}

.tile {
  width:100%;
  height:200px;
  background:red;
}

<div class="tiles">
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
  <div class="tile" style="display: none">Test</div>
</div>

Jquery 仅在 1 个 div 具有这种样式时才有效，我希望这个 hideme div 在所有 div 都具有这种样式时隐藏

Answer 1

您可以使用filter() 来检查:visible 元素：

function checkVisibility() {
  var allHidden = $('.tile').filter(':visible').length === 0;
  $('.hideme').toggle(!allHidden);
}

// Toggle the first element on button click and run the check
$('#toggleStyle').on('click', function() {
  $('.tile').first().toggle();
  checkVisibility();
})

checkVisibility();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<button id="toggleStyle" type="button">Toggle Style</button>

<div class="tiles">
  <div class="tile" style="display:none">Test</div>
  <div class="tile" style="display:none">Test</div>
  <div class="tile" style="display:none">Test</div>
  <div class="tile" style="display:none">Test</div>
  <div class="tile" style="display:none">Test</div>
  <div class="tile" style="display:none">Test</div>
</div>

<div class="hideme">Hide Me!</div>