jQuery syntax for variable attributes

Question

I'm trying to compact and optimize some code and have the following types that I would like to compact, but can't get the correct syntax for that:

var my_field_name = $('#my_field_name'); // a multiple select
var my_array = {"0":"123","1","456","2":"789"};
my_array = $.parseJSON(my_array);
$.each(my_array, function (k, v) {
    $("#my_field_name option[value="+v+"]").prop("selected", true);
}

so far everything's working fine, but I "would like" to use my_field_name in the $.each loop like my_field_name.("option[value="+v+"]").prop("selected", true); but this seems to be an incorrect syntax. Is the $("#my_field_name option[value="+v+"]") the only way to go?

T.J. Crowder · Accepted Answer · 2013-02-25 15:40:32Z

2

Since my_field_name is a jQuery instance for the select element, you'd use children to access its options elements:

$.each(my_array, function (k, v) {
    my_field_name.children('option[value=' + v + ']').prop("selected", true);
}

...but see also below.

It's probably worth noting that your my_array variable doesn't point to an array. In fact, that line is a syntax error (because you've used a comma after "1" rather than a colon). (If you'd used the colon you'd have an object with the keys "0", "1", and "2", but it wouldn't be an array. Granted, standard "arrays" in JavaScript aren't really arrays at all, but...) I think you wanted:

var my_array = ["123", "456", "789"];

You also don't use $.parseJSON on something that isn't a string.

If my_array actually ends up being an array (either because you've written it literally or because it's parsed from a JSON string like ["123", "456", "789"]), rather than using children you may be better off just looping through the options:

// Let's assume you get jsonString from somewhere else, and it's really a string,
// as though you had this code: jsonString = '["123", "456", "789"]'
var my_array = $.parseJSON(jsonString);
$.each($("#my_field_name")[0].options, function(index, option) {
    if ($.inArray(option.value, my_array) !== -1) {
        option.selected = true;
    }
});

The options property on a raw select DOM element (note the [0] to get to the raw element) is an array-like object with a length property, so $.each will loop over it using indexes. $.inArray will then see if the option's value is present in the array. You don't need to cache the lookup using the my_field_name variable because you only do the lookup once.

But note that that won't work if the JSON string is {"0": "123", "1": "456", "2": "789"}, because $.inArray won't work with a non-array object like that.

Re your comment below:

... in your example you're still using $("#my_field_name") and that is what I was trying to avoid, since $("#my_field_name") is already cached on top of the script and though I thought of using the var name instead of repeating $("#my_field_name") every time I need to reference that field.

If you're already doing

var my_field_name = $("#my_field_name");

...above it in the code, then naturally in any of the examples in this answer, if you see $("#my_field_name"), you can replace it directly with my_field_name. So for instance, if you see:

$.each($("#my_field_name")[0].options, function(index, option) {

and you already have my_field_name in a variable, you can change it to this;

$.each(my_field_name[0].options, function(index, option) {

edited Feb 25, 2013 at 15:40

answered Feb 25, 2013 at 14:07

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

McRui Over a year ago

Yes, the quotes were just a mistype here and the array (forgot to post it here, is parsed by $.parseJSON). But that ends up being the same thing (as I may figure out). I'll edit the question.

T.J. Crowder Over a year ago

@Mario: I figured. Doesn't change the answer. :-) Happy coding,

McRui Over a year ago

So in your opinion, using the cached variable my_field_name is a better option than using the full $("#my_field_name")?

T.J. Crowder Over a year ago

@Mario: Actually, with apologies, I completely misread the question. :-) I've read it correctly now, and updated the answer. Sorry about that.

McRui Over a year ago

Tanks T.J. but although it seems like another solution, in your example you're still using $("#my_field_name") and that is what I was trying to avoid, since $("#my_field_name") is already cached on top of the script and though I thought of using the var name instead of repeating $("#my_field_name") every time I need to reference that field.

|

Collectives™ on Stack Overflow

jQuery syntax for variable attributes

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related