如何遍历DIV id元素以检查样式None或Block

Question

我想遍历DIV id元素以检查样式是否为无/块？

要检查的代码

 // The below code can perform that but just once. if($('#loadingProgressContainer').css('display') == 'none') { console.log("Display = NONE !!!"); } else { console.log("Display = BLOCK !!"); } //I tried with the below code but not working while ($('#loadingProgressContainer').css('display') != 'none') { console.log("Display = BLOCK !!"); } console.log("Display = NONE !!!"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tbNewStyleWrapper" style="position: relative;"> <div id="loadingProgressContainer" style="display: block;"> <div id="loadingProgressElement"> <p><h1>Test Please...</h1></p> <img src="http://www.dev.tasch.co.za/airportshuttle2/components/com_taxibooking/assets/images/ajax-loader-bar.gif"> </div> </div> </div> 

Answer 1

 setInterval(function() { if ($('#loadingProgressContainer').css('display') == 'none') { console.log("Display = NONE !!!"); } else { console.log("Display = BLOCK !!"); } }, 3000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tbNewStyleWrapper" style="position: relative;"> <div id="loadingProgressContainer" style="display: block;"> <div id="loadingProgressElement"> <p> <h1>Test Please...</h1> </p> <img src="http://www.dev.tasch.co.za/airportshuttle2/components/com_taxibooking/assets/images/ajax-loader-bar.gif"> </div> </div> </div> 

仅当您要在特定时间段内重复检查div的可见性时，此代码段仅供参考

Answer 2

您可以这样做：

$('div').each(function() {

   /* Check the CSS Display Property and display it in console. */
   console.log($(this).css('display'));
});

Answer 3

如果您需要重复检查元素的可见性，则可以使用setInterval（） 。 这不是执行此操作的最佳方法，而是一种快速的解决方案。 设置间隔的第二个参数是您希望函数以毫秒为单位运行的频率。 下面的代码将每3秒运行一次。

setInterval(function(){ 
   if($('#loadingProgressContainer').css('display') == 'none')
   {
      console.log("Display = NONE !!!");
   }
   else
  {
     console.log("Display = BLOCK !!");
  }
     }, 3000);

Answer 4

$(function() {
$('div').each(function() {
   /* Check the CSS Display Property. */
   console.log($(this));
   console.log($(this).css('display'));
});
});