Jquery each - Stop loop and return object

Question

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!     }      });   } 

Answer 1

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.

Answer 2

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){     ...