How to skip to next iteration in jQuery.each() util?

JavascriptJqueryIteration

Javascript Problem Overview


I'm trying to iterate through an array of elements. jQuery's documentation says:

jquery.Each() documentation

> Returning non-false is the same as a continue statement in a for loop, it will skip immediately to the next iteration.

I've tried calling 'return non-false;' and 'non-false;' (sans return) neither of which skip to the next iteration. Instead, they break the loop. What am i missing?

Javascript Solutions


Solution 1 - Javascript

What they mean by non-false is:

return true;

So this code:

var arr = ["one", "two", "three", "four", "five"];
$.each(arr, function(i) {
  if (arr[i] == 'three') {
    return true;
  }
  console.log(arr[i]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

will log one, two, four, five.

Solution 2 - Javascript

By 'return non-false', they mean to return any value which would not work out to boolean false. So you could return true, 1, 'non-false', or whatever else you can think up.

Solution 3 - Javascript

Javascript sort of has the idea of 'truthiness' and 'falsiness'. If a variable has a value then, generally 9as you will see) it has 'truthiness' - null, or no value tends to 'falsiness'. The snippets below might help:

var temp1; 
if ( temp1 )...  // false

var temp2 = true;
if ( temp2 )...  // true

var temp3 = "";
if ( temp3 ).... // false

var temp4 = "hello world";
if ( temp4 )...  // true

Hopefully that helps?

Also, its worth checking out these videos from Douglas Crockford

update: thanks @cphpython for spotting the broken links - I've updated to point at working versions now

The Javascript language

Javascript - The Good Parts

Solution 4 - Javascript

Dont forget that you can sometimes just fall off the end of the block to get to the next iteration:

$(".row").each( function() {
    if ( ! leaveTheLoop ) {
        ... do stuff here ...
    }
});

Rather than actually returning like this:

$(".row").each( function() {
    if ( leaveTheLoop ) 
        return; //go to next iteration in .each()
    ... do stuff here ...
});

Solution 5 - Javascript

The loop only breaks if you return literally false. Ex:

// this is how jquery calls your function
// notice hard comparison (===) against false
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
   break;
}

This means you can return anything else, including undefined, which is what you return if you return nothing, so you can simply use an empty return statement:

$.each(collection, function (index, item) {
   if (!someTestCondition)
      return; // go to next iteration

   // otherwise do something
});

It's possible this might vary by version; this is applicable for jquery 1.12.4. But really, when you exit out the bottom of the function, you are also returning nothing, and that's why the loop continues, so I would expect that there is no possibility whatsoever that returning nothing could not continue the loop. Unless they want to force everyone to start returning something to keep the loop going, returning nothing has to be a way to keep it going.

Solution 6 - Javascript

jQuery.noop() can help

$(".row").each( function() {
    if (skipIteration) {
        $.noop()
    }
    else{doSomething}
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJoshView Question on Stackoverflow
Solution 1 - JavascriptPaolo BergantinoView Answer on Stackoverflow
Solution 2 - JavascriptTJ LView Answer on Stackoverflow
Solution 3 - JavascriptmlennoxView Answer on Stackoverflow
Solution 4 - JavascriptLee MeadorView Answer on Stackoverflow
Solution 5 - JavascriptDave CousineauView Answer on Stackoverflow
Solution 6 - JavascriptmelaxonView Answer on Stackoverflow