選擇除div元素之外的文檔上的所有元素並將css應用於它們

Question

我想選擇頁面上除“div”元素之外的所有元素，並逐個將類應用於它們5秒鍾。 這是我的jQuery代碼：

$('*').not('div').each(function(){
    $(this).addClass("flash");
    setTimeout(function() {
        $(this).removeClass("flash");
    }, 5000);
});

搜索后，我認為這段代碼很好，但我的應用程序甚至沒有開始。 它在啟動圓形加載后立即出現，並且無法啟動。 有幫助嗎？

編輯：
頁面加載后，我希望每個元素（div除外）讓類閃爍5秒，一個接一個。 對不起，我之前沒有解釋過

Answer 1

使用$('body > *').not("div")你可以獲得除div之外的所有元素。

 $('body > *').not("div").each(function(i) { // it will loop through all elements except div var obj = $(this); // get current element setTimeout(function() { $(obj).addClass("flash"); // add class }, i*500); // delay 200 ms setTimeout(function() { $(obj).removeClass("flash"); // remove class after some delay }, i*1000); // delay 500 ms }); 

 .flash { color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <ul> <li> AAA </li> <li> bbb </li> <li> ddd </li> <li> ccc </li> </ul> <span>This is Span</span> <div>This is Div</div> <span>This is Span</span> <br /> <label>This is Label</label> <div id = "tags"> <div id = "1"> aaa </div> <div id = "2"> bbb </div> <div id = "3"> ccc </div> <div id = "4"> ddd </div> </div> <ul> <li> 111 </li> <li> 222 </li> <li> 333 </li> <li> 444 </li> </ul> 

Answer 2

如果我錯了，請糾正我。

希望我能理解你的問題。 你想說，你想要第一個顯示5秒的非div元素，然后是第一個刪除類和第二個非div元素顯示5秒，依此類推。

您正在使用每個功能。 每個功能都將在一次被執行，而不管令人滿意元件的數量的。 你應該做這樣的事情：

var c=0;
function action(){
  $('body *').not('div').eq(c).addClass("flash");
  setTimeout(function(){
    $('body *').not('div').eq(c).removeClass("flash");
    c++;
    if(c<$('body *').not('div').length)action();
  },5000);
}
$(document).ready(function(){
  action();
});

如果您逐個運行它們，請始終使用function來幫助您。 通過使用變量來控制它來停止該功能。 這總是有幫助的。

注意 ：如果不是div的元素嵌套，則此代碼可能無效。 但我認為所有不是div的元素都不適用。

Answer 3

而不是設置這么多的超時，為什么不只是做一個：

 var elements = $('*').not('div'); elements.each(function() { $(this).addClass('flash'); }) setTimeout(function() { elements.each(function() { $(this).removeClass('flash'); }) }, 5000); 

 div, span {display:inline-block; width:50px; height:50px; background:green;} .flash {background:red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> <span></span> <span></span> <div></div> 

如果你想在為每個項目添加類之間出現明顯的延遲，那么你需要添加一個延遲，但是這會增加很多超時，如果你有很多元素就會導致你的頁面崩潰

 var animationRunning = false, elements = $('*').not('div'), endIndex = elements.length - 1, delayTime = 250; $('#button').click(function() { if (!animationRunning) { // stops multiple clicks happening animationRunning = true; elements.each(function(index) { var element = $(this); setTimeout(function() { element.addClass('flash'); }, delayTime * index); }); setTimeout(function() { elements.each(function(index) { var element = $(this); setTimeout(function() { element.removeClass('flash'); if (index == endIndex) { animationRunning = false; } }, delayTime * index); }) }, 5000 + (elements.length * delayTime)); // this will start the unflash animation 5 esconds after the last flash class is added } }); 

 div, span { display: inline-block; width: 50px; height: 50px; background: green; } .flash { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> <span></span> <span></span> <div></div> <button id="button">start animation</button> 

Answer 4

干得好：

$(function(){
   $("body :not('div')").each(function(index){       
     // add the class
     setTimeout(function(){
       $(this).addClass("flash");
     }.bind(this),index*5000);
     // remove the class
     setTimeout(function(){
       $(this).removeClass("flash");
     }.bind(this),(index+1)*5000); 
   });     
});