How to set the value for all elements using a variable in jQuery?

Question

Setting the value for all input fields of a class foo is easy:

$('#long .path .to .foo').val('...');

But now I need to manipulate the foo fields at multiple places, so I saved it as object as want to use it like this:

foo = $('#long .path .to .foo');
foo.val('...');

When I assign the value within the function, where I use it, it works. But when this doesn't work:

$(document).ready(function() {
    foo = $('#long .path .to .foo');
    bar();
}
function bar() {
    foo.val('...');
}

And it's not about the scope, since this works:

function bar() {
    foo.first().val('...'); // or last() 
}

How to set the value of all elements of a class using a jQuery object saved to a variable (outside the current scope)?

@Madbreaks If you mean declare then when declaration is missing the variable is global when defined like `foo = $('#long .path .to .foo');` — bugwheels94, Jul 14 '16 at 20:29
@Madbreaks Outside of the function, above it: `$(document).ready(function() { foo = $('#long .path .to .foo'); bar(); }` — automatix, Jul 14 '16 at 20:29
@sbonkosky why do you think that will work? That's not logical — bugwheels94, Jul 14 '16 at 20:29
@user1533609 correct, however it's unclear from op's post if where `foo` is declared. — Madbreaks, Jul 14 '16 at 20:30
@user1533609 Wrapping the variable in `$()` will make it a jQuery object, allowing mmethods like `val()` to be used. Why would that not be logical? — sbonkosky, Jul 14 '16 at 20:32
@sbonkosky It's already a jQuery object: `foo = $('#long .path .to .foo');`. — automatix, Jul 14 '16 at 20:33
@automatix Ah, here I thought you always had to wrap the variable in `$()` to use it. Learned something new! — sbonkosky, Jul 14 '16 at 20:36
If you can make a jsfiddle then maybe we can detect something by looking at your HTML and JS — bugwheels94, Jul 14 '16 at 20:36
Are you getting errors? What about this "doesn't work" for you? — scrappedcola, Jul 14 '16 at 20:39
@DaniP Thank you! I'm actually wondering, why the same isn't working for me now... Trying to find a difference... — automatix, Jul 14 '16 at 20:41
@scrappedcola With "doesn't work" I meant, that the input field's value doesn't get updated. But now I see: It _does_ work, bu only for the first item. And when I declare the variable in the function, it works as expected (sets all fields' values). — automatix, Jul 14 '16 at 20:47
Guys, first of all thank you for trying to help me! I think, I've finally found the differenc between DaniP's fiddle and my code. In my case the first input field is common HTML and all the other ones are generated on the fly -- _after_ the `document` has been loaded. Its why it works for the first and only the first element. — automatix, Jul 14 '16 at 21:11

score 0 · Answer 1 · answered Jul 14 '16 at 21:30

The problem is, that the fields are generated by JavaScript -- after the document has been loaded. Only the input item is static, that's why it work for it.

The solution is to move the foo declaration to a callback and use is in the function(s) instead of the variable, so that the relevant input items list is fetched every time, when it should be manipulated:

$(document).ready(function() {
    foo = function() {
        return $('#long .path .to .foo');
    };
    bar();
}
function bar() {
    foo().val('...');
}

How to set the value for all elements using a variable in jQuery?

1 Answers1