Jquery each - Stop loop and return object
JqueryLoopsReturnEachJquery Problem Overview
Can anybody tell me why the loop did not stop after the 5
entry?
http://jsbin.com/ucuqot/edit#preview
$(document).ready(function()
{
someArray = new Array();
someArray[0] = 't5';
someArray[1] = 'z12';
someArray[2] = 'b88';
someArray[3] = 's55';
someArray[4] = 'e51';
someArray[5] = 'o322';
someArray[6] = 'i22';
someArray[7] = 'k954';
var test = findXX('o322');
});
function findXX(word)
{
$.each(someArray, function(i)
{
$('body').append('-> '+i+'<br />');
if(someArray[i] == 'someArray')
{
return someArray[i]; //<--- did not stop the loop!
}
});
}
Jquery Solutions
Solution 1 - Jquery
Because when you use a return
statement inside an each
loop, a "non-false" value will act as a continue
, whereas false
will act as a break
. You will need to return false
from the each
function. Something like this:
function findXX(word) {
var toReturn;
$.each(someArray, function(i) {
$('body').append('-> '+i+'<br />');
if(someArray[i] == word) {
toReturn = someArray[i];
return false;
}
});
return toReturn;
}
From the docs:
> We can break the $.each() loop at a particular iteration by making the > callback function return false. Returning non-false is the same as a > continue statement in a for loop; it will skip immediately to the next > iteration.
Solution 2 - Jquery
modified $.each
function
$.fn.eachReturn = function(arr, callback) {
var result = null;
$.each(arr, function(index, value){
var test = callback(index, value);
if (test) {
result = test;
return false;
}
});
return result ;
}
it will break loop on non-false/non-empty result and return it back, so in your case it would be
return $.eachReturn(someArray, function(i){
...
Solution 3 - Jquery
here :
http://jsbin.com/ucuqot/3/edit
function findXX(word)
{
$.each(someArray, function(i,n)
{
$('body').append('-> '+i+'<br />');
if(n == word)
{
return false;
}
});
}
Solution 4 - Jquery
Try this ...
someArray = new Array();
someArray[0] = 't5';
someArray[1] = 'z12';
someArray[2] = 'b88';
someArray[3] = 's55';
someArray[4] = 'e51';
someArray[5] = 'o322';
someArray[6] = 'i22';
someArray[7] = 'k954';
var test = findXX('o322');
console.log(test);
function findXX(word)
{
for(var i in someArray){
if(someArray[i] == word)
{
return someArray[i]; //<--- stop the loop!
}
}
}
Solution 5 - Jquery
> "We can break the $.each() loop at a particular iteration by making > the callback function return false. Returning non-false is the same as > a continue statement in a for loop; it will skip immediately to the > next iteration."
from http://api.jquery.com/jquery.each/
Yea, this is old BUT, JUST to answer the question, this can be a bit simpler:
function findXX(word) {
$.each(someArray, function(index, value) {
$('body').append('-> ' + index + ":" + value + '<br />');
return !(value == word);
});
}
$(function() {
someArray = new Array();
someArray[0] = 't5';
someArray[1] = 'z12';
someArray[2] = 'b88';
someArray[3] = 's55';
someArray[4] = 'e51';
someArray[5] = 'o322';
someArray[6] = 'i22';
someArray[7] = 'k954';
findXX('o322');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
A bit more with comments:
function findXX(myA, word) {
let br = '<br />';//create once
let myHolder = $("<div />");//get a holder to not hit DOM a lot
let found = false;//default return
$.each(myA, function(index, value) {
found = (value == word);
myHolder.append('-> ' + index + ":" + value + br);
return !found;
});
$('body').append(myHolder.html());// hit DOM once
return found;
}
$(function() {
// no horrid global array, easier array setup;
let someArray = ['t5', 'z12', 'b88', 's55', 'e51', 'o322', 'i22', 'k954'];
// pass the array and the value we want to find, return back a value
let test = findXX(someArray, 'o322');
$('body').append("<div>Found:" + test + "</div>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
NOTE: array .includes()
may better suit here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
Or just .find()
to get that https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
Solution 6 - Jquery
Rather than setting a flag, it could be more elegant to use JavaScript's Array.prototype.find
to find the matching item in the array. The loop will end as soon as a truthy value is returned from the callback, and the array value during that iteration will be the .find
call's return value:
function findXX(word) {
return someArray.find((item, i) => {
$('body').append('-> '+i+'<br />');
return item === word;
});
}
const someArray = new Array();
someArray[0] = 't5';
someArray[1] = 'z12';
someArray[2] = 'b88';
someArray[3] = 's55';
someArray[4] = 'e51';
someArray[5] = 'o322';
someArray[6] = 'i22';
someArray[7] = 'k954';
var test = findXX('o322');
console.log('found word:', test);
function findXX(word) {
return someArray.find((item, i) => {
$('body').append('-> ' + i + '<br />');
return item === word;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>