在第二个文本区域之后获取下一个所有输入

Question

我的 javascript 假设 var oneTR= $("#Grp1"); 中有一个变量，我可以使用 this solution.[=11= 将 3 个 TR 组合成 Combined 行]

我想要的是：

在一个组合行中获取第二个 textarea 之后的所有 inputs

 <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>

我试过这样的解决方案：

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

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

但这不起作用。这是JSFiddle

注意 - 我在这行中得到了正确的 textarea 但不仅仅是 inputs

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

Answer 1

试试这个：

工作Demo

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

Answer 2

编辑、更新

尝试

// 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>

Answer 3

您可以使用以下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);

演示 Link：http://jsfiddle.net/84wk1kry/2/

在第二个文本区域之后获取下一个所有输入

Get next all inputs after second textarea

html

javascript

jquery