How to return a variable with jQuery each function

Question

This is my script (simplified):

var $error = false;
//Check for errors
$('.required').each(function()
{
    var $error = true;
});
alert($error);

How to make the above code return true in the alert function? The each function is executed 3 times at my page to check for empty fields. But in the above the alert contains false instead of true. Is there a way to parse the variable $error outside the each function to check if there are empty fields after the each loop?

If you're been alerted `false`, then you have no elements that match the `.required` selector. Try fixing this first :) — gustavohenke, Jun 06 '13 at 14:52
Related [SO question](http://stackoverflow.com/questions/5373278/variable-shadowing-in-javascript) and [Wikipedia article](http://en.wikipedia.org/wiki/Variable_shadowing). — ajp15243, Jun 06 '13 at 14:54

score 3 · Answer 1 · answered Jun 06 '13 at 14:52

3

You are shadowing the outer $error variable inside the .each() callback. Get rid of the var so you reference the outer one instead:

var $error = false;
$('.required').each(function() {
    $error = true; // Now this refers to the `$error` declared above
});

However, if you're simply using the .each call to check if any elements have the .required class, you could just check .length:

alert($('.required').length > 0); // true or false depending if elements matched

answered Jun 06 '13 at 14:52

James Allardice

164,175
21
332
312

2

For more information: [Variable shadowing in Javascript](http://eloquentjavascript.net/chapter3.html#p14dd0d54) – Justin ᚅᚔᚈᚄᚒᚔ Jun 06 '13 at 14:54
Thanks a lot all! Learned something small but very usefull again today! Plus your second way is a lot easier. I will use it. I was now using: $(this).val()=='' instead. – Rens Tillmann Jun 06 '13 at 14:56

score 3 · Answer 2 · answered Jun 06 '13 at 14:52

just remove the inner var keyword

var $error = false;
//Check for errors
$('.required').each(function()
{
     $error = true;  // No Var Here
});
alert($error);

or use window as your namespace like the following

window.error = false;
//Check for errors
$('.required').each(function()
{
     window.error = true;  // No Var Here
});
alert(window.error);

Note its better to break the loop if you got an error with return false -- just a performance advice !

score 3 · Accepted Answer · edited Jun 06 '13 at 15:02

Drop the var inside the .each() callback function, otherwise you are defining a new variable in a different scope.

var $error = false;
//Check for errors
$('.required').each(function()  //<-- start of new scope block
{
    var $error = true;  //<--defines new variable -- different from one above
});
alert($error);

Dropping var, it will now use the variable defined in the block above it

var $error = false;
//Check for errors
$('.required').each(function()  
{
    $error = true;  
});
alert($error);

score 2 · Answer 4 · answered Jun 06 '13 at 14:52

2

You $erro declared locally and globally

var $error = false;
$('.required').each(function()
{
    $error = true;
});

answered Jun 06 '13 at 14:52

PSR

39,804
41
111
151

score 0 · Answer 5 · answered Jun 06 '13 at 14:57

0

If you want to check if the texts are empty you can use:

var $error = false;
$('input.anyclass').each(function()
{
    if($(this).val() == "")
    {
        $error = true;
    }
});
alert($error);

answered Jun 06 '13 at 14:57

Thiago Dias

1
3

How to return a variable with jQuery each function

5 Answers5