Question

我有一组文本框，我想在客户端执行某些操作。我想用JQuery来做这件事。我简化了我的问题的例子如下

<asp:TextBox ID="Don'tSelectME_1" runat="server" />
 <table id = "outer_1">
  <table id="inner_1">
   <tr>
    <td>
     <asp:TextBox ID="SelectME_1" runat="server" />
    </td>
    <td>
     <asp:TextBox ID="SelectME_2" runat="server" />
    </td>
   </tr>
  </table>
  <table id="inner_2">
   <tr>
    <td>
     <asp:TextBox ID="SelectME_3" runat="server" />
    </td>
    <td>
     <asp:TextBox ID="SelectME_4" runat="server" />
    </td>
   </tr>
 </table>
</table>

如果没有讨论嵌套表（我会亲自使用div），我想选择2个嵌套表中的文本框。

我正在尝试使用类似$（'table [id =“outer_1”]＆gt; table＆gt; tr＆gt; td＆gt;输入）的内容来抓取所有文本框输入。然而，没有工作，任何人有任何想法？我在想也许是“＆gt;”选择器只能在选择器中使用一次。提前全部谢谢

Answer 1

$('table#outer_1').find('input');

Here是实时工作示例，我还修复了您的无效表格HTML ...

Answer 2

我总是想知道为什么人们可以直接将.find()放入选择器并让选择器引擎决定如何在一个函数调用中处理它而不是两个。

$("#outer_1 input")

将获取指定表中的所有输入标记。要解释，这意味着要找到ID为#outer_1的对象，然后搜索标记类型为input的所有后代。

Answer 3

它不起作用，因为

（差不多）所有浏览器都会插入tbody标记：

$('#outer_1 > tbody table > tbody > tr > td >input')
您的表格的HTML标记不正确。

看到这个工作小提琴：http://jsfiddle.net/mrchief/6vQ9p/

但是，您可以通过以下方式简化选择器：

$('#outer_1 #inner_1 :input')（如果必须使用外表）

或$('#inner_1 :input')（因为你也在内表上识别）

http://jsfiddle.net/mrchief/6vQ9p/1/

Answer 4

试试这个，它更灵活

$("table").find("input")

或仅限子表

$("table table").find("input")

Answer 5

＆LT;表＆gt;不是＆lt; table＆gt;的有效（直接）子项（只有＆lt; thead＆gt;，＆lt; tbody＆gt;，＆lt; tfoot＆gt;和＆lt; tr＆gt;），不同的浏览器会以不同的方式处理此错误，有些会为您填写缺少的元素，因此正确的选择器会像：#outer_1 > table > tbody > tr > td > table > tbody > tr > td > input用于某些浏览器，或#outer_1 > table > tr > td > table > tr > td > input用于其他浏览器。

我建议首先，就像你说的那样，使用div（s）代替容器而不是没有行或单元格标签的元素，如果你不介意选择＃outer_1的所有后代元素你的选择器可以简化为：

$('#outer_1 input')

作为旁注，您可以发布生成的HTML而不是ASP代码吗？

JQuery parent-＆gt;子选择

5 个答案: