How to skip to next iteration in jQuery.each() util?
JavascriptJqueryIterationJavascript Problem Overview
I'm trying to iterate through an array of elements. jQuery's documentation says:
> 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
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}
});