CODEWITHSUNDEEP
javascriptjquery
WonderLand
WonderLand

Reputation: 5674

Jquery .each() - return value undefined

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

});

Upvotes: 1

Views: 4911

Answers (3)

Anujith
Anujith

Reputation: 9370

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 
}

});

Upvotes: 2

Viktor S.
Viktor S.

Reputation: 12815

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

Upvotes: 2

Quentin
Quentin

Reputation: 943548

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

Upvotes: 4

Related Questions