Querying an "in page" table with jQuery
<p>I have loaded a table of data into an HTML page so that it looks like this:</p>

<pre><code>&lt;div id="objList" style="display:none"&gt;
    &lt;div class="objRecord"&gt;
        &lt;div class="objID"&gt;6846&lt;/div&gt;
        &lt;div class="objColor"&gt;blue&lt;/div&gt;
        &lt;div class="objSize"&gt;500&lt;/div&gt;
        &lt;div class="objType"&gt;Q&lt;/div&gt;
    &lt;/div&gt;
    ...
    &lt;div class="objRecord"&gt;
        &lt;div class="objID"&gt;6877&lt;/div&gt;
        &lt;div class="objColor"&gt;green&lt;/div&gt;
        &lt;div class="objSize"&gt;600&lt;/div&gt;
        &lt;div class="objType"&gt;T&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The reason that I've done it this way is because it's a relatively small amount of data and I don't want the page to be "chatty" and go back to the server (ajax) for new data on each event.</p>

<p>I will be querying that table of data based on user events on the page.</p>

<p>My questions:<br>
1. Is there anything wrong with that structure for retrieving records using jQuery? How would you do it? I was thinking that I could also use a table + tr + td structure for the data but can't see the advantage to that - yet...<br>
2. How would I, for example, get the sizes for all the blue objects from the table with jQuery?</p>

<p>I can get all the blue records in the table using:</p>

<pre><code>var myobjects = $('.objRecord .objColor:contains("blue")').parent();
</code></pre>

<p>But I am now struggling to get the size value out of that array...</p>

<pre><code>for (var i = 0; i &lt; myobjects.length; i++) {
    var x = myobjects[i]; // somehow get the size out of this?
}
</code></pre>
