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

如果我错了，请纠正我。

希望我能理解你的问题。你想要，让我们说，第一个非div元素显示5秒，然后第一个删除类和第二个非div元素显示5秒，依此类推。

您正在使用每个功能。无论满意元素的数量如何，每个函数 ALL 都会立即执行。你应该做这样的事情：

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); 
   });     
});

选择除div元素和＆amp;之外的文档上的所有元素。将css应用于他们

4 个答案: