Breaking Out Of jQuery's Each() Iteration Method

In the past, I've talked about the beauty and the power of jQuery's each() method for collection iteration. But, as awesome as it is, I still find myself falling back to for-loop iteration in cases where I might need to break out of a loop, mid-collection. Today, however, at the jQuery Conference 2010, Karl Swedberg totally rocked my world in the way that only Karl knows how - he showed me that jQuery's each() method also provides this mid-iteration break functionality.

In a standard Javascript for-loop, you can always break out of a loop by using the break command within the body of the loop execution:

In this code, we are planning to loop from one to one hundred; however, we are executing the break command in the body of our iteration. As such, when the above code has finished executing, we are left with the following console output:

Iteration 0

As you can see, the loop entered its first iteration, logged one message to the console, and then completely stopped iterating. The break command that we executed not only halted the current iteration (Iteration 0), it also prevented the other 100 iterations from taking place.

As Karl demonstrated at jQCon, the jQuery each() method allows us to achieve this same kind of control flow by returning false from the iteration callback. To demonstrate this, I'm going to use each() to look for a given list item within an unordered list. Once I have found the desired list item, I am going to break out of the each() iteration and log the success:

In the above code, I find all the list items in a given list. Then, I loop over them looking for the one whose text contains the phrase, "sarah." Once I find this list item, I am returning false:

Doing this - returning false - within the each() iteration callback does the same thing that the break command does within a for-loop. As such, running the above code results in the following console output:

Checking... Jill
Checking... Sarah
That Sarah - she's so hot right now.

As you can see, only the first two out of the four possible list items were searched. Once the target phrase was found in the second list item, the each() iteration was halted.

There was a lot of stuff at jQuery Conference 2010 that was, without a doubt, awesome; but, sometimes it's the little things that come out of nowhere and rock your world. Being able to break out of an each()-based iteration was one of those little things. And, according to a few conversations that I had after Karl's talk, I wasn't the only one who had never seen this jQuery functionality before.

You Might Also Be Interested In: