CODEWITHSUNDEEP
jquery
americanslon
americanslon

Reputation: 4298

Jquery foreach pass variable

I have a function defined as follows -

function populate() {
        $('input[id^=User]:visible').each(function () {
            currentVal = this.val;
            if (this.id == 'User.FirstName') {
                $('input[id*=FirstName]:visible').each(function (currentVal) {
                    if (this.id.indexOf("User") < 0)
                        this.value = currentVal;
                });
            }
        });
    }

Essentially what I am trying to do is for every element starting with User I want to populate loop through another collection of elements and assign them the value from the parent loop. The problem is passing currentval into the second foreach - it ends being 0,1,2 for some reason.

It's obvious I am not understanding something very fundamental about jquery but I can't articulate this enough for google to be helpful, I tried. Thank you!

Upvotes: 0

Views: 1236

Answers (2)

Lepidosteus
Lepidosteus

Reputation: 12047

You need to read the documentation on jquery each() function.

The callback receives two parameters, index and value, so currentVal gets 0,1,2 because you have an array with 3 entries (index 0, 1 and 2)

function populate() {
    $('input[id^=User]:visible').each(function () {
        currentVal = this.val;
        if (this.id == 'User.FirstName') {
            $('input[id*=FirstName]:visible').each(function (idx, val) {
                if (this.id.indexOf("User") < 0)
                    this.value = currentVal;
            });
        }
    });
}

Upvotes: 1

PSL
PSL

Reputation: 123739

$.each takes 2 arguments 1st one is index and 2nd one is the element, and you are overwriting your currentVal from outerscope with the one defined as argument in the inner each function call back scope inside each callback.

function populate() {
        $('input[id^=User]:visible').each(function () {
            currentVal = this.value; //<-- Not val it should be value
            if (this.id == 'User.FirstName') {
                $('input[id*=FirstName]:visible').each(function () {//<-- and here
                    if (this.id.indexOf("User") < 0)
                        this.value = currentVal; 
                });
            }
        });
    }

Brief expn with your code:

function populate() {
        $('input[id^=User]:visible').each(function () {
            currentVal = this.val;   
//<-- Ok now this currentVal  is available in this scope and for its subsequest each, but wait
            if (this.id == 'User.FirstName') {
                $('input[id*=FirstName]:visible').each(function (currentVal) {
//<-- Now you defined the index argument of second  each loop as the same variable name so this variable inside this callback takes a new scope and not the one from its parent each.
                    if (this.id.indexOf("User") < 0)
                        this.value = currentVal;
                });
            }
        });
    }

Upvotes: 1

Related Questions