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

Question

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

我如何编写 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>