Using jQuery, how to get variable value, find HTML element with the same class name as variable, and update the content
<p>I have a number of variables stored in an external file (settings.js):</p>

<pre><code>var company = "Apple";
var city = "Toronto";
var weather = "Sunny";
</code></pre>

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

<pre><code>&lt;div class="company"&gt;&lt;/div&gt;
&lt;div class="city"&gt;&lt;/div&gt;
&lt;div class="weather"&gt;&lt;/div&gt;
</code></pre>

<p>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. </p>

<p>After executing the function HTML should look like this:</p>

<pre><code>&lt;div class="company"&gt;Apple&lt;/div&gt;
&lt;div class="city"&gt;Toronto&lt;/div&gt;
&lt;div class="weather"&gt;Sunny&lt;/div&gt;
</code></pre>

<p><strong>Note:</strong> 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.</p>

<p><a href="http://jsfiddle.net/Klikerko/sdDZB/" rel="nofollow"><strong>JSFiddle:</strong></a></p>
