Question

I use drop-down selector to load matching section from an external file into the table cell in a row below selector. I can’t seem to be able to target it properly. I thought that nextAll() would do the trick but it doesn’t. What else shall I try?

$('.mySelector').change(function(){
    var $selectForm = '#' + $(this).val();
    $(this).nextAll('.fLoad').load('formParts.html ' + $selectForm );
});

<table>
<tr>
    <td>
    <select class="mySelector">
       <option value="o1">Car details</option>
       <option value="o2">Bike details</option>
       <option value="o3">Boat details</option>
    </select>
    </td>
</tr>
<tr>
    <td class='fLoad'>&nbsp;</td>
</tr>
<tr>
    <td>
    <select class="mySelector">
       <option value="o1">Car details</option>
       <option value="o2">Bike details</option>
       <option value="o3">Boat details</option>
    </select>
    </td>
</tr>
<tr>
    <td class='fLoad'>&nbsp;</td>
</tr>   
</table>

Answer 1

Do this:

$(this).closest('tr').next().find('.fLoad').load('formParts.html ' + $selectForm );

• use the closest()^(docs) method to get the nearest ancestor <tr> element.
• the next()^(docs) method to traverse to the next <tr> element
• the find()^(docs) method to find the .fLoad element