What javascript method to target descendants?
<p>I'm using a javascript function to set the value of a text field, based on the option chosen from a select field.</p>

<p>The javascript contains a lot of other stuff, but only the following is relevant to this question.</p>

<pre><code>$(function (){
    $('.source').live("change", function(e) { 
        var target = $(this).next('.target')[0];
        ----other stuff----
    });
});
</code></pre>

<p>I originally had my form set up as follows, and everything worked fine.</p>

<pre><code>&lt;select class="source"&gt;&lt;/select&gt;
&lt;input class="target"&gt;&lt;/input&gt;
</code></pre>

<p>I've subsequently added some styling, which has required extra divs.</p>

<pre><code>&lt;select class="source"&gt;&lt;/select&gt;
&lt;div class="level1"&gt;
    &lt;div class="level2"&gt;
        &lt;input class="target"&gt;&lt;/input&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Now the javascript function does not work, because the next method only targets siblings and not descendants.</p>

<p>So my question is, what method should I be using to target a specific descendant?</p>

<p>An important fact: this markup is part of a nested form, and is repeated several times on the same page. It is important that the function targets the correct .target field, i.e. immediately subsequent and descendant.</p>

<p>I've tried obvious candidates – .find(), .children() — but these don't seem to work. Would appreciate any ideas or pointers.</p>

<p>Thanks!</p>
