Question

我有一个带有DIV的HTML，其中包含所有可能的输入类型，即文本，选择，广播btn或复选框。

如何编写jQuery选择器，它总是选择类型

中的第一个输入元素

<div id="testID">

<input id="txt" type="text">
<input id ="rdbtn" type="radio">
<input id="chkbox" type="checkbox">

<select id="slt">
<option value=1>Good Morning</option>
<option value=2>Hello</option>
<option value=3>Hi</option>
</select>


</div>

所以DIV的DOM结构可以改变。

我试过了

jQuery('#testID select').first()

或

jQuery('#testID input ').first()

但是我怎样才能编写一个选择器来选择第一个输入类型而不管改变DOM结构

Answer 1

要从指定容器中获取第一个input字段，需要find :input，:input选择器基本上选择所有表单控件。如果您想避免隐藏字段，可以使用:not()选择器。它将根据查询过滤元素。

参考此示例：

var firstInput = $('#testID').find(':input')[0];
console.log(firstInput);

var firstNonHiddenInput = $('#testID').find(':input:not([type=hidden])')[0];
console.log(firstNonHiddenInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="testID">
  <input id="txt_hidden" type="hidden">
  <input id="txt" type="text">
  <input id="rdbtn" type="radio">
  <input id="chkbox" type="checkbox">

  <select id="slt">
    <option value=1>Good Morning</option>
    <option value=2>Hello</option>
    <option value=3>Hi</option>
  </select>

</div>

Answer 2

你可以这样做：

jQuery('#testID input[type=text]:eq(0)')
jQuery('#testID select:eq(0)')

如何在DIV中查找第一个输入或选择或单选按钮或复选框

2 个答案: