Get next all inputs after second textarea

Question

I have a Variable in my javascript assume var oneTR= $("#Grp1");, And I can combine group of 3 TRs to a Combined Row using this solution.

What I want is:

Get all the inputs after second textarea in one combined row

 <table id="t01">
  <tr>
    <th>HEAD 1</th>
    <th>HEAD 2</th>
    <th>HEAD 3</th>
  </tr>
  <tr id="Grp1">
    <td>Grp1 data</td>
    <td>Grp1 data</td>
    <td>Grp1 data</td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td>Grp1 data</td>
    <td><textarea></textarea></td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td><textarea></textarea></td>
    <td><input type="text"><input type="text"></td>
    <td><input type="text"><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="Grp2">
    <td>Grp2 data</td>
    <td>Grp2 data</td>
    <td>Grp2 data</td>
  </tr>
  <tr>
    <td>Grp2 data</td>
    <td>Grp2 data</td>
    <td><textarea></textarea><input type="text"></td>
  </tr>
  <tr>
    <td><textarea></textarea></td>
    <td><input type="text"><input type="text"></td>
    <td><input type="text"><input type="text"></td>
    <td><input type="text"></td>
  </tr>
  <tr id="Grp3">
    <td>Grp3 data</td>
    <td>Grp3 data</td>
    <td>Grp3 data</td>
  </tr>
  <tr>
    <td>Grp3 data</td>
    <td>Grp3 data</td>
    <td><textarea></textarea><input type="text"></td>
  </tr>
  <tr>
    <td><textarea></textarea></td>
    <td><input type="text"><input type="text"></td>
    <td><input type="text"><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

I tried solution like this:

 var finalinps = oneTR.add(oneTR.nextUntil("#Grp2")).find("textarea").eq(1).nextAll(":input");

 console.log("finalinps: ", finalinps.length); //finalinps: 0

but this is not working. Here is the JSFiddle

Note - I'm getting proper textarea with this line but not just inputs

oneTR.add(oneTR.nextUntil("#Grp2")).find("textarea").eq(1)

Depending on the DOM structure so heavily results in a brittle solution. Better to identify the required elements using a class value or similar. BTW, what library are you using? Add a tag for it. — RobG, Jan 07 '15 at 05:49
Consider using a table section to identify the controls you want to get, then you could do something like: `$('#sectionID input')`. — RobG, Jan 07 '15 at 06:12
@Slime - I'm not getting your solution, can you pls explain? — trex, Jan 07 '15 at 06:12

guest271314 · Answer 1 · 2015-01-07T06:58:48.690

Edit, Updated

Try

// updated to return `oneTR1 , 6 `input elements` following second `textarea`
var finalinps = oneTR.add($("#t01 input").filter(function(i, el) {
                    return $("#t01 textarea:eq(1)").parents("tr").index() >=  
                           $(el).parents("tr").index()})
                );

var oneTR = $("#Grp1");

//var finalinps = oneTR.add(oneTR.nextUntil("#Grp2")).find("textarea").eq(1).nextAll(":input");



var finalinps = oneTR.add($("#t01 input").filter(function(i, el) {
  return $("#t01 textarea:eq(1)").parents("tr").index() >= $(el).parents("tr").index()
}));

console.log("finalinps: ", finalinps.length, finalinps);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="t01">
  <tr>
    <th>HEAD 1</th>
    <th>HEAD 2</th>
    <th>HEAD 3</th>
  </tr>
  <tr id="Grp1">
    <td>Grp1 data</td>
    <td>Grp1 data</td>
    <td>Grp1 data</td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td>Grp1 data</td>
    <td>Grp1 data</td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td>
      <textarea></textarea>
    </td>
    <td>
      <input type="text">
      <input type="text">
    </td>
    <td>
      <input type="text">
      <input type="text">
    </td>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr id="Grp2">
    <td>Grp2 data</td>
    <td>Grp2 data</td>
    <td>Grp2 data</td>
  </tr>
  <tr>
    <td>Grp2 data</td>
    <td>Grp2 data</td>
    <td>
      <textarea></textarea>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>
      <textarea></textarea>
    </td>
    <td>
      <input type="text">
      <input type="text">
    </td>
    <td>
      <input type="text">
      <input type="text">
    </td>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr id="Grp3">
    <td>Grp3 data</td>
    <td>Grp3 data</td>
    <td>Grp3 data</td>
  </tr>
  <tr>
    <td>Grp3 data</td>
    <td>Grp3 data</td>
    <td>
      <textarea></textarea>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>
      <textarea></textarea>
    </td>
    <td>
      <input type="text">
      <input type="text">
    </td>
    <td>
      <input type="text">
      <input type="text">
    </td>
    <td>
      <input type="text">
    </td>
  </tr>
</table>

:- Thanks! I think this is what I want but, this will work for only first group of TR. I wonder it won't work if `var oneTR = $("#Grp2");` — trex, Jan 07 '15 at 06:21

score 1 · Accepted Answer · answered Jan 07 '15 at 06:13

1

Try this:

Working Demo

oneTR.add(oneTR.nextUntil("#Grp2")).find("textarea").eq(1).parents('tr').find('input');
console.log("finalinps: ", finalinps.length);

answered Jan 07 '15 at 06:13

Mangesh Parte

2,179
1
13
16

-Sorry - I wanted 6 textareas. That was my mistake! In case of first group of rows there will be 5! – trex Jan 07 '15 at 06:22

score 0 · Answer 3 · answered Jan 07 '15 at 06:50

You can get the length of text input elements next to the 2nd text area with the below js:

//get the index of 2nd textarea tr
var curIndex = $("table textarea:eq(1)").closest("tr").index();

//get the length of text input elements
var txtlen = $("table tr:eq("+curIndex+")").nextAll('tr').andSelf().find("input[type=text]").length;

alert(txtlen);

Demo Link: http://jsfiddle.net/84wk1kry/2/

Get next all inputs after second textarea

3 Answers3