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

Question

我有多个同名的div，我想检查所有div是否具有显示样式：none; 那么另一个div也将隐藏。Codepen： - 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具有这种样式时才起作用，我希望当所有div具有这种样式时隐藏此hideme 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>