CODEWITHSUNDEEP
javascriptjquerydom
sarsnake
sarsnake

Reputation: 27713

Find the next textarea using Jquery

HTML

<tr id="rowId"><td><textarea class="inputTextarea"></textarea></td><td><textarea class="inputTextarea"></textarea></td></tr>
<tr id="rowId2"><td><textarea class="inputTextarea"></textarea></td><td><textarea class="inputTextarea"></textarea></td></tr>
<tr id="rowId3"><td><textarea class="inputTextarea"></textarea></td><td><textarea class="inputTextarea"></textarea></td></tr>

Provided I know rowId, how do I find the next textarea ON THIS PAGE, starting at any arbitary point. I don't mean ANY input, textarea only. I need to be able to start AT ANY row, and progress on to the next textarea, essentially going down the rows.

EDIT Based on answers, I used the following code to traverse the textareas row by row:

var curElt = $('#' + startAt);  //startAt is the first row id   

        for(var i=1; i < 10; i++) {

            $(curElt).find('textarea').eq(0).val(i);
            $(curElt).find('textarea').eq(1).val(i+1);

            curElt = $(curElt).next();
        }

Upvotes: 8

Views: 31211

Answers (4)

draeton
draeton

Reputation: 685

$textarea = $('#rowId textarea').eq(0);

$nextarea = $textarea.closest('tr').next().find('textarea').eq(0);

Just to clarify, $.fn.next() finds the next sibling in the DOM.

  1. Starting from the textarea, first you have to find its parent-tr ( $textarea.closest('tr') ).
  2. From there, use next to find the next tr ( .next() )
  3. Finally, find the first textarea within that tr ( .find('textarea').eq(0) )

Upvotes: 4

Jacob Relkin
Jacob Relkin

Reputation: 163268

You can use the next and find methods:

$('#' + current_row_id).next().find('textarea').eq(0);

next will get the next sibling, and then find will find all of the elements within the set that match the passed-in selector(s), then eq(0) will grab the first element in the resulting set returned from find.

Upvotes: 14

Phrogz
Phrogz

Reputation: 303291

$('#rowId2').find('textarea');

That will find both children of the row. If you want the first one, either:

$('#rowId2').find('textarea').eq(0); //jQuery object
$('#rowId2').find('textarea')[0];    //DOM Element

Edit: If you only know one row and want to find the first textarea in the next row:

$('#rowId').next().find('textarea').eq(0);

Upvotes: 6

Chandu
Chandu

Reputation: 82933

Try this:

$("#rowID textarea:first-child").val()

Upvotes: 1

Related Questions