Using jQuery, how to get variable value, find HTML element with the same class name as variable, and update the content

Question

I have a number of variables stored in an external file (settings.js):

var company = "Apple";
var city = "Toronto";
var weather = "Sunny";

In my HTML I'm referencing jQuery and settings.js where all variables will be stored. The code between the body tags looks something like this:

<div class="company"></div>
<div class="city"></div>
<div class="weather"></div>

I'm trying to make some smart jQuery code which will read through the settings.js file, find variable and load it, then find HTML element with the same class name as variable, and finally update the content of that element with variable value.

After executing the function HTML should look like this:

<div class="company">Apple</div>
<div class="city">Toronto</div>
<div class="weather">Sunny</div>

Note: There might be multiple locations inside HTML with the same class name. All this will be running locally in FF. This is test/demo project so I'm not too worried about the performance.

JSFiddle:

So you basically want to crawl through all defined vars and see if they have dom elements matching and update with values... Bad idea to handle it this way. I suggest at least some kind of structure instead of iterating through all window vars. — Kai Qing, Dec 12 '12 at 19:28
Hi @Kai Qing, you got the goal correct. I'm not experienced with jQuery so feel free to suggest different structure. — Klikerko, Dec 12 '12 at 19:43
No need. You selected one and I agree that's a much better way to handle this. — Kai Qing, Dec 12 '12 at 20:16

score 5 · Accepted Answer · answered Dec 12 '12 at 19:27

Use an object to contain the vars and then you can refer to the properties using a string:

 // Variables 
    var data = {
        company:"Apple",
        city:"Toronto",
        weather:"Sunny"

    }

    $("div").each(
        function(){
        this_class = $(this).attr("class");
        $(this).text(data[this_class]);
        }
    );

score 4 · Answer 2 · edited May 23 '17 at 11:48

This is not possible because there is no way to get a list of variables in a given scope (see Getting All Variables In Scope).

If you were to leave off the var (not necessarily recommended), then they would each be attached to the window object, and you could do something like this:

$("div").each(function () {
   $(this).text(window[$(this).attr('class')]);
});

As an alternative you could also define those values in an object instead of having each as its own variable.

score 0 · Answer 3 · answered Dec 12 '12 at 19:28

You need some kind of scoping to pull this off. Just defining them as var x puts them on the window. So you can iterate over all variables on the window to find them:

for(var k in window) {
    // do stuff
}

But as you might imagine, there will be a lot of window variables (45 in my chrome browser on this page right now.

Matanya just beat me to the how once the scoping is in place. But the above is some of the why.

Edit: I would actually do it the other way, not select on the divs, but select on the class names. You would get a much smaller result set selecting on the classes you're interested in (for a typical page, anyways - div's are usually sprinkled about like candy).

for(var k in data)
{
    $("."+k).html(data[k]);
}

Using jQuery, how to get variable value, find HTML element with the same class name as variable, and update the content

3 Answers3