Question

I’m using a javascript function to set the value of a text field, based on the option chosen from a select field.

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

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

I originally had my form set up as follows, and everything worked fine.

<select class="source"></select>
<input class="target"></input>

I’ve subsequently added some styling, which has required extra divs.

<select class="source"></select>
<div class="level1">
    <div class="level2">
        <input class="target"></input>
    </div>
</div>

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

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

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.

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

Thanks!

Answer 1

In your case this would work:

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

;