javascript - 选择器-如何选择div中的第一个输入？

我必须到达div(class = form-group)中的第一个输入以使第一个输入成为必需。

<div class="form-group clearfix">
   <div class="col-md-2 col-md-offset-2">
       <div class="form-text-field first-name">
           <input type="text" id="firstName1" class="signup-input firstName" name="first[1]" placeholder="">
       </div>
   </div>
   <div class="col-md-2">
       <div class="form-text-field last-name">
           <input type="text" id="lastName1" class="signup-input lastName" name="last[1]" placeholder="optional">
       </div>
   </div>
   <div class="col-md-4">
       <div class="form-text-field email">
           <input type="text" data-index="1" id="inputMail1" class="signup-input text-value email" name="email[1]"  placeholder="e.g. [email protected]"/>
           <span class="common-sprite disNone sign-up-cross first clone"></span>
       </div>
   </div>
</div>

在单击第三个元素(电子邮件)时，如何选择第一个输入(名字)？

最佳答案

如果出于性能原因想要进一步缩小选择器范围，则可以使用以下方法:

$('div.form-group > div:first > div > input:first')

这将变成:

$(function() {
   $('#inputMail1 ').click(function(){
       $('div.form-group > div:first > div > input:first').focus();
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="form-group clearfix">
   <div class="col-md-2 col-md-offset-2">
       <div class="form-text-field first-name">
           <input type="text" id="firstName1" class="signup-input firstName" name="first[1]" placeholder="">
       </div>
   </div>
   <div class="col-md-2">
       <div class="form-text-field last-name">
           <input type="text" id="lastName1" class="signup-input lastName" name="last[1]" placeholder="optional">
       </div>
   </div>
   <div class="col-md-4">
       <div class="form-text-field email">
           <input type="text" data-index="1" id="inputMail1" class="signup-input text-value email" name="email[1]"  placeholder="e.g. [email protected]"/>
           <span class="common-sprite disNone sign-up-cross first clone"></span>
       </div>
   </div>
</div>