how to dynamically exit a jquery $.each()?

Question

i have a list of images which i am getting through ajax and then using jquery $.each() i loop through the images and display a image one after the other after an interval of one second. I want the user to be able click on a stop button and so that the user can stop at a particular image if he wants to. So i need to dynamically exit $.each() when the user clicks on the stop button. Is it possible to do it?

Solution 1

You can use return false to break out of each() loops early.

Example:

<script>
    $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow"); 
        if ($(this).is("#stop")) {
          $("span").text("Stopped at div index #" + index);
          return false;
        }
      });
    });

</script>

Source: http://api.jquery.com/each/

Solution 2

To break out of an each() loop you would:

return false;

So your button could set a variable when clicked that the each loop checks each pass, then returns false when the variable is set.

http://api.jquery.com/each/

Solution 3

http://api.jquery.com/each/

We can stop the loop from within the callback function by returning false.

Solution 4

return(false);

should do it.

View more solutions

Comments

[Jeriko]

How about a code sample?

[peter]

once a get the data through a ajax call i pass the data to a function show_images(data){ if($('#stop').is(':visible')){ return false; }else{ //diplay next image } } $(".stop").click(function(){ $("#stop").hide(); }); this does not work

[Jess]

But you must return false. You cannot early return with true.