Question

Ok,

Here’s the exampe:

<table>
    <tr>
        <td>
            <type="button" id="mybutton" value="insert">
        </td>
        <td>
            <textarea>My Text</textarea>
        </td>
    </tr>
</table>

I need to change the textarea value when I click on my button. The value will come from a set variable. This code has no other IDs or classes to refer to. So I have the following

jQuery('#mybutton').click(function(){

  jQuery(this).parent().next()...????;

});

This will get me to the next column, but I don’t know how to select the textarea from there.

I tried child(), another next() but no luck.

Answer 1

To select child elements in jQuery we use .children():

jQuery('#mybutton').click(function(){
    jQuery(this).parent().next().children().val(some_variable);
});

Note that this will select all sibling elements to the textarea as well unless you add textarea as a selector in the .children() function call: .children('textarea')

You could also use .closest() and .find():

jQuery('#mybutton').click(function(){
    jQuery(this).closest('tr').find('textarea').val(some_variable);
});

.closest() finds the first ancestor element that matches the selector, and find, well finds the selector in the descendant elements of the root-selection.

Some Documentation for ya:

• .closest(): http://api.jquery.com/closest
• .find(): http://api.jquery.com/find
• .children(): http://api.jquery.com/children
• jQuery Selectors: http://api.jquery.com/category/selectors/ (I recommend checking this out as it’s got some very useful selectors)