Get all page ID's and loop them one at a time to change CSS?
<p>I am using <code>localStorage</code> to save CSS information on certain <code>&lt;div&gt;</code>'s. When the user modify's one of these <code>&lt;div&gt;</code>'s, it set's a <code>localStorage</code> item with the following syntax:</p>

<pre><code>ID OF ELEMENT + "-" + x,y, or z (for the different CSS attributes)
</code></pre>

<p>So, an example of an item for the x-coordinate of the div <code>#two</code> would be:</p>

<pre><code>two-x
</code></pre>

<p>The setting of these works fine, and I can reflect this by doing the following on page load:</p>

<pre><code>$(".drag").css({
"left" : localStorage.getItem("two-x"), 
"top" : localStorage.getItem("two-y"),
"z-index" : localStorage.getItem("two-z"),
});
</code></pre>

<p>The page is going to have many div's on it, and I can't hardcode each of them. SO, this brings me to my question... <b> How can I get all the ID's on the page, assign them to a variable, then change the CSS for each ID until they've all been account for?</b></p>

<p>My attempt at this:</p>

<pre><code>var idtwo = [];
$("body").find("div").each(function(){ idtwo.push(this.id); });
$(".drag").css({
            "left" : localStorage.getItem(idtwo + "-x"), 
            "top" : localStorage.getItem(idtwo + "-y"),
            "z-index" : localStorage.getItem(idtwo + "-z"),
});
</code></pre>

<p>The only problem is that the output of <code>idtwo</code> is <code>one,two</code> (when there are two div's on the page with the ID's one and two), where it needs to be just <code>one</code>, run the CSS changes, then <code>two</code>, and run the CSS changes.</p>
