javascript - 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

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 selId;
            }
        });
        //    return null;
    }

});

Answer 1

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