How do I access specific elements within a div tag using $(this)?
<p>I've got some javascript that allows me to load states into a dropdown using json anytime the user changes the country.  This works great except that I can't have more than one of combination of country/state dropdowns on a page.  So, given HTML like the following:</p>

<pre><code>&lt;div id="div1" data-ajax-address="owner"&gt;
   &lt;select id="country1" data-ajax-address="country"&gt;&lt;/select&gt;
   &lt;select id="state1" data-ajax-address="state"&gt;&lt;/select&gt;
&lt;/div&gt;
&lt;div id="div2" data-ajax-address="owner"&gt;
    &lt;p&gt;
        &lt;select id="country2" data-ajax-address="country"&gt;&lt;/select&gt;
    &lt;/p&gt;
    &lt;p&gt;
        &lt;select id="state2" data-ajax-address="state"&gt;&lt;/select&gt;
    &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>I want to be able to do something like this:</p>

<pre><code>$('div[data-ajax-address="owner"]').each(function() {
    $(this).children('select[data-ajax-address="country"]).change(function() {
        ....
    });
});
</code></pre>

<p>to access the country/state select elements within the div.  I can't use children() because they could be embedded within another element -- like the country2 &amp; state2 being embedded inside of the paragraph tags.</p>

<p>Any ideas on how I can accomplish this?</p>

<p>Thanks.</p>
