How to break/exit from an each() function in JQuery?

Principle of breaking in jQuery's each()

For those fond of sneak peeks, using return false; in jQuery's each() function is similar to a break in traditional JavaScript loops. Your escape hatch out of the iteration.

Effective iteration control is essential, letting you manage the loop conditionally:

• With return false;, exit the loop immediately when your condition satisfies.
• Use return true; or an unadorned return; to skip the current step and continue the loop, because why the rush, right?

Practical cases for controlling iteration flow

Looking for a needle in a haystack

let found = false;
$.each(array, function(index, value) {
  if (value.id === "searchedId") {
    found = value; // Found it!
    return false; // Exits quicker than a cat chased by a dog.
  }
});


Working only on a subset of elements

$("#myList li").each(function(index) {
  if (index >= 10) return false; // Only interested in first 10 items. Rest can go on a coffee break.
  // Your code for each item...
});


Error handling within the loop

$.each(dataSet, function(key, value) {
  if (!value) {
    console.error("Invalid data found at key:", key); // Yikes, bad data
    return false; // Lets the loop retire early!
  }
  // Your data-processing code...
});


Dealing with layer-cake loops (nested ones!)

Nested loops are common when dealing with multi-dimensional datasets. And yes, nested cakes taste the best! Exiting a nested .each() is also done using return false;:

$.each(matrix, function(row_index, row) {
  $.each(row, function(col_index, value) {
    if (value === "exitSignal") {
      return false; // Breaks the inner loop like opening a Russian doll.
    }
    // Process data...
  });
  if (valueFoundInInnerLoop) return false; // Exits the outer loop like leaving the Matryoshka shop.
});


Bear in mind that return false; will only break the innermost loop. If you wish to bail out from an outer loop, you'll need some additional planning.

Gotchas and common tripwires

Gotcha #1: Misplacement of return false; can cause unexpected exits. Position it judiciously within your condition sections.

Gotcha #2: Not all each-like functions in different JavaScript libraries humour return false; the same way. Check the documentation for consistent behaviour.

Tripwire: Some developers mistake return false; for event.preventDefault();. The former is a loop flow controller in jQuery's .each(), while the latter is specific to events.