Jquery .each() - return value undefined

Question

Why getColorOptionSelect() return undefined value (I\'m sure it has a value by debugger ).

It is for sure an issue related to the scope, sorry for my js ignorance

Answer 1

You should do:

function getColorOptionSelect() {

        // get label
        var selId;
        jQuery(".product-options dl label").each(function () {
            el = jQuery(this);
            // lower case, remove *
            var labelText = el.text().toLowerCase().replace("*", "");
            if (labelText == 'color') {
                //return element
                selId = el.parent().next().find("select").attr('id');
                return false; // to stop further execution of each
            }
        });
        return selId;
    }

In your case you are doing return from callback function passed to each and it will not be passed from getColorOptionSelect

The only thing you can do returning a value from each function callback is to tell jquery if it should go to next item (return true;) or not (return false;)

Answer 2

getColorOptionSelect doesn't have an (uncommented) return statement.

The only return statement you have is inside the anonymous function you pass to each(). It will be consumed by the code underlying each() (which will stop looping if it is false).

This isn't a problem of scope, just of there being multiple functions.

You probably want to:

• define a variable before you call each()
• assign a value to it inside the each loop
• return that variable at the end of getColorOptionSelect

Answer 3

Uncomment the last return statement to retun a value (something like selId)

jQuery(document).ready(function () {

colorSelectID = getColorOptionSelect();
alert(colorSelectID);

function getColorOptionSelect() {

    // get label
    var selId;
    jQuery(".product-options dl label").each(function () {
        el = jQuery(this);
        // lower case, remove *
        var labelText = el.text().toLowerCase().replace("*", "");
        if (labelText == 'color') {
            //return element
            selId = el.parent().next().find("select").attr('id');
            return false;  //<---  return false to stop further propagation of each
        }
    });
      return selId; //<---  Must return something 
}

});