finding last loop through a jQuery object_问答_开发者

finding last loop through a jQuery object

开发者 https://www.devze.com 2022-12-23 04:34 出处：网络

Sample jquery. Assume $cog is a cached selector of multiple items. $cog.fadeOut(\'slow\',function(){ alert(\'hey\');

相关专题：jquery

Sample jquery. Assume $cog is a cached selector of multiple items.

$cog.fadeOut('slow',function(){
    alert('hey');
})

In that example, of $cog is a jQuery object of 4 DOM elements, the above wil开发者_Go百科l fade each element out one by one, and trigger an alert each time on the callback (4 alerts).

I'd like to only call the alert when all 4 elements are done with their fadeOut function.

This:

$cog.fadeOut('slow',function(){
})
alert('hey');

when run, will show an alert, then the $cog elements disappear (I'm guessing due to timing issues with the fadeOut animation)

Is there a way when calling a function against multiple DOM objects in a jQuery object to know when it's done with the last item?

You can simply count the callbacks back in.

Try this:

var remaining=$cog.length;
$cog.fadeOut('slow',function(){
    if((--remaining)==0)alert('hey');
})

Try this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  var items = $("li");
  $("#btn").click(function() {
    (function() {
      var items = $("li");
      items.fadeOut("slow", function() {
        items = items.not(this);
        console.log(items.length);
        if (items.length == 0) {
          alert("all done");
        }
      });
    })();
  });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" id="btn" value="Fade Out">
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
</body>
</html>