How it will work when returning a value in .each() function in Jquery?

Question

Using .each() function, to break out of each() loops, we can use return false.

e.g.

$( "div" ).each(function( index, element ) {
     alert('Bye...!');
     return false;
});

But, How it will work when returning any string value?

var myDiv = $( "div" ).each(function( index, element ) {
     return "xyz";
});

Answer 1

Short answer:

return won't work this way in $.each. return will just exit the foreach loop.

var myDiv = $( "div" ).each(function( index, element ) {
     return "xyz";
});
console.log(myDiv);

This will output undefined. Let's try different things and compare outputs:

Long answer

I'm agree that is not clear enough in the Jquery docs, they just say: "You can stop the loop from within the callback function by returning false." What about returning a variable, or returning true? Let's compare different functions:

var stores = ["C", "B", "A"];

function HasC() {
    $(stores).each(function (i, s){
        if(s=="C")
            //yes, we have a C, so let's return true
            return true;
    });
}

function HasB() {
    var b = false;
    $(stores).each(function (i, s){
        if(s=="B"){
            b=true;
            return b;
        }
    });
}

function HasA() {
    var a = false;
    $(stores).each(function (i, s){
        if(s=="A"){
            a = true;
            return false;
        }
    });
    return a;
}

• HasC() will return undefined after but will iterate all the elements, without break
• HasB will return undefined as well, because the b variable context is just inside the each function.
• HasA() will return true and work as expected because once we found the "A", we stop the loop using return false and then after the loop we still have var a alive.

Fiddle: http://jsfiddle.net/aXkcW/19/

Answer 2

You probably need to use map()

var myDiv = $( "div" ).map(function( index, element ) {
     return "xyz";
});

Returning contant "XYZ" does not make much sense to me you proably need to return something else.

The $.map() method applies a function to each item in an array or object and maps the results into a new array. Prior to jQuery 1.6, $.map() supports traversing arrays only. As of jQuery 1.6 it also traverses objects, reference.

Answer 3

Use foreach to iterate through a set of elements and do some actions on them or from them, but i dont see the point of returning anything since return will break the foreach loop :

        $("div").each(function () {
            // update all divs text
            $(this).html = "new text";
        });

Answer 4

you can use a flag..

see FIDDLE

 var flag = false;
 $( "div" ).each(function( index, element ) {     
     if(!flag){
         flag=true;
         alert(index);
         return "xyz";
     }
 });

Answer 5

Returning any constant in .each() loop means returning true.

Also,

 var myDiv = $( "div" ).each(function( index, element ) {
                  return "xyz";
             });

The above code is equivalent to

 var myDiv = $( "div" );

Check this Fiddle